Question

我有一个带有标签的面板和一个内容为container的面板。切换标签时，仅div应当更改，header应该显示在所有标签中。我使用事件selectedTabChange()进行监听，以检查哪个选项卡处于活动状态并显示必要的div标签。我应该写什么selectedTabChange()

.html：

            <mat-tab label="first"></mat-tab>
            <mat-tab label="second"></mat-tab>
            <mat-tab label="third"></mat-tab>
          </mat-tab-group>
          <div class="container">
            <div class="header">Header</div>
            <div *ngIf="isBlock2! && !isBlock3" class="block1">Text</div>
            <div *ngIf="isBlock1! && !isBlock3" class="block2">Text</div>
            <div *ngIf="isBlock1! && !isBlock2" class="block3">Text</div>
          </div>

.ts：

   public isBlock2 = false;
   public isBlock3 = false;

  changeTabs(event) : void {
      isBlock1 != isBlock1; 
  }

Answer 1

在这里，您可以使用

ng-template和ng-container

演示：

Stackblitz Link

selectedTabChangeEvent(event){
    this.isBlock1 = false;
    this.isBlock2 = false;
    this.isBlock3 = false;    
    if(event.index === 0){
        this.isBlock1 = true;
    }else if(event.index === 1){
        this.isBlock2 = true;    
    }else {
       this.isBlock3=true;
    }    
}

Answer 2

America/El_Salvador

尝试这样的事情

更改标签时显示块

2 个答案: