Блог

Я использую Angular v8 и Angular Materials. В частности, mat-tab-group и mat-tab. Я хочу иметь что-то вроде приведенного ниже. Я хочу иметь возможность нажать на » » (который выглядит как вкладка), и в результате будет создана новая вкладка

После нажатия на » » мы увидим, как показано ниже (фокус на новой вкладке, которую мы только что добавили)

Если у меня есть кнопка над mat-tab-group (которая добавляет новую вкладку), все работает нормально, но мы хотим, чтобы » » был в конце списка вкладок (как показано выше). Я могу создать вкладку, но фокус на ней не работает.

Мой код выглядит так. В вызове метода setSelectedIndex я добавляю новый объект customer, а затем устанавливаю для него 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>
  

Спасибо Ro

Вы можете попробовать создать вкладки с помощью массива и привязать его с помощью ngFor, затем вы можете изменить массив, который будет отражать изменения в ваших вкладках, такие как добавление и удаление.

Проверьте следующий пример:

 <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

Обновлено

вы можете добавить кнопку , расположенную последней на вкладках, добавив вкладку после массива, содержащего фактические вкладки, следующим образом:

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