1

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

当用户更改了 tabcontent 中的任何项目时，我想在 tabheader 中显示脏通知。

我怎样才能做到这一点？

我的标签页创建如下：

          <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 时显示 *

我怎样才能做到这一点？

4

1 回答 1

1
  1. 在您的子组件中，添加一个输出事件

@Output() valueChange = new EventEmitter();

  1. 当检测到来自孩子的更改时发出事件

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

  1. 使用父组件中的事件改变mat tab标签

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

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

}

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

有关组件交互的更多信息

于 2019-03-12T14:24:30.173 回答