我有一个包含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时
我怎样才能做到这一点?
@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">