时间戳

首页 > 解决方案 > Angular Material Tabs Wrapper - 添加新选项卡不会反映在 UI 中

angular - Angular Material Tabs Wrapper - 添加新选项卡不会反映在 UI 中

问题描述

我正在尝试创建一个包装器，该包装器MatTabs公开了所有属性，MatTabs并且遇到了这个问题： Angular Material Tabs not working with wrapper component。我向它添加了其他选项卡属性和事件。这些事件似乎正在正确触发。

当我添加一个新选项卡时出现问题。数组正在更新，但 UI 保持不变。

HTML

<div>
  <span class="example-input-label"> Selected tab index: </span>
  <mat-form-field>
    <input matInput type="number" [formControl]="selected">
  </mat-form-field>
</div>

<div>
  <button mat-raised-button
          class="example-add-tab-button"
          (click)="addTab(selectAfterAdding.checked)">
    ADD NEW TAB
    <br/>
  </button>
  <mat-checkbox #selectAfterAdding> Select tab after adding </mat-checkbox>
</div>

<custom-tabs [selectedIndex]="selected.value"
               (sqSelectedIndexChange)="selected.setValue($event)">
  <custom-tab *ngFor="let tab of tabs; let index = index" [label]="tab">
    Contents for {{tab}} tab
    <button mat-raised-button
            class="example-delete-tab-button"
            [disabled]="tabs.length === 1"
            (click)="removeTab(index)">
      Delete Tab
      <br/>

    </button>
  </custom-tab>
</custom-tabs>

TS

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

  addTab(selectAfterAdding: boolean) {
    this.tabs.push('New');
    console.log(this.tabs);
    if (selectAfterAdding) {
      this.selected.setValue(this.tabs.length - 1);
    }
  }

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

自定义标签 StackBlitz。

MatTabs Stackblitz

理想情况下，我希望公开MatTabs提供开箱即用的所有功能，然后再公开一些。

标签： angulartypescriptangular-material2mat-tab

解决方案

因此，选项卡未加载的原因是由于自定义选项卡组件ngViewAfterInit()功能中的代码。它已被初始化，但仅此而已。因此，this.tabGroup永远不会使用当前选项卡进行更新，因此不会反映在 UI 中。所以我添加了一个订阅以观察选项卡何时更改，并使用相同的逻辑（我不确定这是否 100% 正确，但它可以完成工作）。

  public ngAfterViewInit() {
    const matTabsFromQueryList = this.tabs.map((tab) => tab.matTab);
    const list = new QueryList<MatTab>();
    list.reset([matTabsFromQueryList]);
    this.tabGroup._tabs = list;
    this.tabGroup.ngAfterContentInit();

   // watches for when the tabs change
    this.tabs.changes.subscribe(value => {
      const matTabsFromQueryList = value.map((tab) => tab.matTab);
      const list = new QueryList<MatTab>();
      list.reset([matTabsFromQueryList]);
      this.tabGroup._tabs = list;
      this.tabGroup.ngAfterContentInit();
      });
  }

这（再次）不是最优雅的解决方案，因为您需要在加载之前与选项卡进行交互，但它保留了上下文（如输入框所示）。如果不选择不同的选项卡，选项卡不会更新，所以我不得不做一个 hacky 解决方案，将 this.selected.value 切换为 -1 然后切换回正确的选项卡，所以它有点难看，但至少它可以工作。

堆栈闪电战

推荐阅读