Как показать грязное уведомление в заголовке вкладки

Question

У меня есть страница, содержащая 3 вкладки. Каждая из этих вкладок содержит список элементов с возможностями CRUD.

Я хотел бы показать грязное уведомление внутри вкладки, когда пользователь изменил какие-либо элементы внутри содержимого вкладки.

Как я могу это сделать?

Мои вкладки создаются следующим образом:

          <mat-tab-group>
        <mat-tab label="Specialisaties">
          <div class="tabContent">
            <dko-bo-onderneming-detail-specialisaties [ondernemingId]="onderneming.id"></dko-bo-onderneming-detail-specialisaties>
          </div>
        </mat-tab>
        <mat-tab label="Contactpersonen">
          <div class="tabContent">
            <dko-bo-onderneming-detail-contactpersonen [ondernemingId]="onderneming.id"></dko-bo-onderneming-detail-contactpersonen>
          </div>
        </mat-tab>
        <mat-tab label="Referenties">
          <div class="tabContent">
            <dko-bo-onderneming-detail-referenties [ondernemingId]="onderneming.id"></dko-bo-onderneming-detail-referenties>
          </div>
        </mat-tab>
      </mat-tab-group>

Например, внутри dko-bo-onderneming-detail-referenties, которые я отслеживаю при изменении данных:

addReferentie = function (referentiePersoon: ReferentiePersoon) {
    ...
    this.isDirtyReferentiePersonen = true;
};
deleteReferentie = function(referentiePersoon: ReferentiePersoon) {
    ...
    this.isDirtyReferentiePersonen = true;
};

Поэтому, когда я изменяю свойство isDirtyReferentiePersonen, я хотел бы обновить заголовок вкладки «Ссылки», чтобы отображать *, когда я устанавливаю для свойства значение true

Как я могу это сделать?

Answer 1

1. В дочерние компоненты добавьте выходное событие

@Output() valueChange = new EventEmitter();

Выдать событие при обнаружении изменения от ребенка

valueChanged() { this.valueChange.emit(true); }

Используйте событие в родительском компоненте для изменения метки вкладки мата.

updateTabLabel может затем изменить метку вкладки с помощью привязки данных.

updateTabLabel($event){
  if($event)
  {
     this.ondernemingLabel = 'Referenties *';
  }else{
     this.ondernemingLabel = 'Referenties';
  }

}

То есть <mat-tab label="Referenties"> становится <mat-tab [label]="ondernemingLabel">

Дополнительная информация о взаимодействии компонентов