Question

每个选项卡都是子选项，并且此页面具有可编辑的数据源。

当某人更改子组件中的表单值时，子组件会将tab-id返回到父组件。

父组件为多个mat-tab迭代tab-id。因此，当从子组件中接收tab-id时，我想更改标签的背景色。

我这样编码。但不起作用，因为当父组件获得tab-id时，我不知道如何再次踢changeTabColor（）。

parent-component.html

<mat-tab-group>
  <mat-tab *ngFor="let tabPageData of tabPageDatas; let index = index" [label]="tabPageData?.tabName" [ngClass]="{'positive': changeTabColor(tabPageData?.tabCode), 'negative': !changeTabColor(tabPageData?.tabCode)}">
    <child-component (edited)="edited($event)" [value]="tabPageData"></child-component>
  </mat-tab>
</mat-tab-group>

parent-component.scss

.positive {
  background-color: green;
}

.negative {
  background-color: transparent;
}

parent-component.ts

editedTabCodeAry = new Array<string>();

edited(tabCode: string) {
  this.editedTabCodeAry.push(tabCode);
}

changeTabColor(tabCode: string) {
  return this.editedTabCodeAry.indexOf(tabCode) >= 0;
}

child-component.ts

  @Output()
  edited = new EventEmitter<string>();

  // this method run when form in tab edited
  dataUpdate(copy: Data) {
    // run data update method here
    // return edited tabCode
    this.edited.emit(this.value.tabCode);
  }

Answer 1

您可以尝试

父HTML

 <mat-tab-group>
   <mat-tab *ngFor="let tabPageData of tabPageDatas; let index = index" 
    [label]="tabPageData?.tabName" [ngClass]="{ classFlag[index] === true ? 'positive' : 'negative': 
       !changeTabColor(tabPageData?.tabCode)}">
         <child-component (edited)="edited($event)" [value]="tabPageData" [index]="index"></child- 
         component>
   </mat-tab>
 </mat-tab-group>

儿童ts

  @Output()
  edited = new EventEmitter<string>();
  @Input() index: number = null;
  // this method run when form in tab edited
 dataUpdate(copy: Data) {
   // run data update method here
   // return edited tabCode
  this.edited.emit({tabcode: this.value.tabCode, index: this.index});
 }

父项

  classFlag: any = [];
  functionForSettingADefaultClassFlagValue() {
  // in this function we are setting the default value of classFlag so i iterate loop with the length of tabPageDatas
      for (let i =0; i < tabPageDatas.length; i++) {
       this.classFlag[i] = false
      }
  }

  edited(data: any) {
       this.editedTabCodeAry.push(tabCode);
       this.changeTabColor(data);
  }

  changeTabColor(data) {
   if (this.editedTabCodeAry.indexOf(data.tabCode) >= 0) {
     this.classFlag[index] = true;
   } else {
     this.classFlag[index] = false;
   }
  }

我希望它能对您有所帮助。

Answer 2

我用不同的方法解决了这个问题。我实现了Renderer2和Document

constructor(@Inject(DOCUMENT) private document: Document,private renderer: Renderer2)

采用编辑方法

this.renderer.addClass(this.document.getElementById(`mat-tab-label-0-${data.index}`), 'positive');

仅此而已

当子组件返回tab-id时如何更改mat-tab的背景色

2 个答案: