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

【问题标题】：How to change back-ground color of mat-tab when child-component returned tab-id子组件返回tab-id时如何更改mat-tab的背景颜色
【发布时间】：2019-08-17 15:45:22
【问题描述】：

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

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

parent-component 为多个 mat-tab 迭代 tab-id。因此，当从子组件收到 tab-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);
  }

【问题讨论】：

你可以简单地从编辑的函数中调用 changeTabColor 函数，也许它可以工作
但是changeTabColor函数的参数tabCode是针对html中的迭代数据。
好的，我正在写一个ans请在几分钟后检查

标签： angular angular-material2 ng-class mat-tab

【解决方案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});
 }

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

希望对你有帮助。

【讨论】：

感谢您的建议。我稍微改变了html。因为那是错误。所以我就这样改变了。 [ngClass]="{ '正面': classFlg[index] === true, '负面': classFlg[index] === false}"。但标签颜色仍然没有改变。 ;_;
如果你静态实现 css 属性，那么它会按预期工作吗？
如何静态实现css属性？我没有具体的图像。能给我举个例子吗？
静态意味着像这样 [ngClass]="'positive'"。它会改变元素的颜色吗？
我变成了这样 [ngClass]="'positive'"。但标签背景颜色不会改变。 ;_;

【解决方案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');

就是这样

【讨论】：