Блог

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

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

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

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

           <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, я хотел бы обновить ‘Referenties’ заголовка вкладки, чтобы показывать *, когда я устанавливаю для свойства значение true

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

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

@Output() valueChange = new EventEmitter();

2. Выдает событие при обнаружении изменения от дочернего элемента

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

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

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

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

}
  

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

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