如何在选项卡标题上显示脏通知

问题描述 投票:1回答:1

我有一个包含3个标签页的页面。每个标签页都包含一系列具有CRUD可能性的项目。

当用户更改选项卡内容中的任何项目时,我想在选项卡标题内显示脏通知。

我怎样才能做到这一点?

我的tabpages创建如下:

          <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时

我怎样才能做到这一点?

angular angular-material angular6 mat-table
1个回答
1
投票
  1. 在子组件中,添加输出事件

@Output() valueChange = new EventEmitter();

  1. 在检测到孩子发生变化时发出事件

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

  1. 使用父组件中的事件更改mat选项卡标签

然后,updateTabLabel可以使用数据绑定修改选项卡标签。

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

}

所以<mat-tab label="Referenties">成为<mat-tab [label]="ondernemingLabel">

More info on component interaction

© www.soinside.com 2019 - 2024. All rights reserved.