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

Question

每个选项卡都是子组件，此页面具有可编辑的dataSource。

当有人在子组件中更改表单值时，子组件返回tab-id到parent-component。

parent-component迭代多个mat-tab的tab-id。所以当从子组件中收到tab-id时，我想更改标签背景颜色。

我编码像这样。但是没有用，因为当父组件得到tab-id时我不知道如何再次使用changeTabColor（）。

家长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>

家长component.scss

.positive {
  background-color: green;
}

.negative {
  background-color: transparent;
}

家长component.ts

editedTabCodeAry = new Array<string>();

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

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

儿童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>

孩子

  @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');

就这样