时间戳

首页 > 解决方案 > 子组件返回tab-id时如何更改mat-tab的背景颜色

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

问题描述

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

当有人在子组件中更改表单值时，子组件将 tab-id 返回给父组件。

parent-component 为多个 mat-tab 迭代 tab-id。因此，当从子组件收到标签 ID 时，我想更改标签背景颜色。

我是这样编码的。但不起作用，因为当父组件获得 tab-id 时，我不知道如何再次启动 changeTabColor()。

父组件.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>

父组件.scss

.positive {
  background-color: green;
}

.negative {
  background-color: transparent;
}

父组件.ts

editedTabCodeAry = new Array<string>();

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

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

子组件.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);
  }

标签： angularangular-material2ng-classmat-tab

解决方案

你可以试试这样

父 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});
 }

父母 ts

  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;
   }
  }

我希望它可以帮助你。

推荐阅读