Как изменить фоновый цвет mat-tab, когда дочерний компонент вернул tab-id - PullRequest
Новая
       19

Как изменить фоновый цвет mat-tab, когда дочерний компонент вернул tab-id

0 голосов
/ 27 марта 2019

каждая вкладка является дочерним компонентом, и эта страница имеет редактируемый источник данных.

когда кто-то изменяет значение формы в дочернем компоненте, дочерний компонент возвращает идентификатор табуляции родительскому компоненту.

родительский компонент повторяет tab-id для нескольких mat-tab. поэтому при получении идентификатора вкладки от дочернего компонента я хочу изменить цвет фона вкладки.

Я так закодировал. но не работает, потому что я не знаю, как снова вызвать 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);
  }

Ответы [ 2 ]

1 голос
/ 27 марта 2019

Вы можете попробовать вот так

родительский 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>

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

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

Надеюсь, это поможет вам.

0 голосов
/ 27 марта 2019

Я решил это другим подходом.Я реализую Renderer2 и Document 

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

в отредактированном методе 

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

вот и все

...