angular - 将新选项卡动态添加到 mat-tab-group

Question

我正在使用 Angular v8 和 Angular Material 。特别是 mat-tab-group 和 mat-tab。我想要像下面这样的东西。我希望能够单击“+”(看起来像一个选项卡)，结果是它会创建一个新选项卡

点击“+”后，我们会看到如下(重点是我们刚刚添加的新标签)

如果我在 mat-tab-group 上方有一个按钮(添加了一个新选项卡)一切正常，但我们希望“+”位于选项卡列表的末尾(如上所示)。我可以创建标签，但焦点没有。
我的代码看起来像。在 setSelectedIndex 方法调用我添加了一个新的客户对象，然后将 selectedIndex 设置为它。但没有喜悦。下面的代码示例。如果需要，可以尝试添加为 plunkr

<mat-tab-group
        class="no-vertical-scroll"
        [disableRipple]="true"
        animationDuration="0ms"
        (selectedTabChange)="setSelectedIndex($event)"
        (focusChange)="onFocusChange($event)"
        [selectedIndex]="selectedTabIndex"
        style="margin-top: 10px;">

    <mat-tab *ngFor="let customer of customers; let index = index"
             class="fullHeight no-vertical-scroll no-horizontal-scroll">

        <div>
            content for each tab
        </div>

    </mat-tab>

    <mat-tab tooltip="New Tab" class="fullHeight no-vertical-scroll" label="New Tab">
        <ng-template mat-tab-label class="fullWidth">
            <span><mat-icon>add</mat-icon></span>
        </ng-template>
    </mat-tab>

</mat-tab-group>

谢谢罗

Answer 1

你可以试试使用数组创建选项卡并使用 ngFor 绑定(bind)它, 然后您可以更改将反射(reflect)更改到您的选项卡中的数组，例如添加和删除。
检查以下示例:

<div>
      <button mat-raised-button
              class="example-add-tab-button"
              (click)="addTab(selectAfterAdding.checked)">
        Add new tab
      </button>
      <mat-checkbox #selectAfterAdding> Select tab after adding </mat-checkbox>
    </div>
    
    <mat-tab-group [selectedIndex]="selected.value"
                   (selectedIndexChange)="selected.setValue($event)">
      <mat-tab *ngFor="let tab of tabs; let index = index" [label]="tab">
        Contents for {{tab}} tab
      </mat-tab>

   <mat-tab disabled>
    <ng-template mat-tab-label>
        <button mat-icon-button (click)="addTab(selectAfterAdding.checked)">
            <mat-icon>add_circle</mat-icon>
        </button>
    </ng-template>
   </mat-tab>

    </mat-tab-group>

ts文件

  tabs = ['First', 'Second', 'Third'];
  selected = new FormControl(0);

  addTab(selectAfterAdding: boolean) {
    this.tabs.push('New');

    if (selectAfterAdding) {
      this.selected.setValue(this.tabs.length - 1);
    }
  }

  removeTab(index: number) {
    this.tabs.splice(index, 1);
  }

stackblitz Example
更新
您可以通过在包含实际选项卡的数组之后添加一个选项卡来添加位于选项卡最后的 + 按钮，如下所示:

<mat-tab disabled>
    <ng-template mat-tab-label>
        <button mat-icon-button (click)="addTab(selectAfterAdding.checked)">
            <mat-icon>add_circle</mat-icon>
        </button>
    </ng-template>
</mat-tab>