Question

我在Angular 2中有一个Material Tab组件。
我希望在选项卡的末尾有一个按钮，它可以作为添加标签按钮。点击它后，会在它之前创建一个新选项卡我尝试在那里放一个按钮，但找不到如何将它放在最后一个标签旁边。

所以我做的是添加了一个像按钮一样的标签。单击此选项卡后，将创建一个新选项卡。

但是，单击此选项卡时，它会获得焦点。虽然我可以更改选择了哪个选项卡，但选项卡仍然具有聚焦的UI（它是彩色的）我怎么能让它完全失去它的重点呢？

P.S。如果有办法在最后一个标签旁边添加一个常规按钮，而不是一个标签，这也很好。

编辑 - 代码：

这是我的标签设置方式：

<mat-tab-group (selectedTabChange)="selectedTab($event)">
    <mat-tab>
      <ng-template mat-tab-label>
        Basic Details
      </ng-template>
    </mat-tab>

    <mat-tab #categoryTab *ngFor="let table of mCase.Tables; let tableIndex = index" [attr.data-index]="tableIndex">
    <mat-tab>

    <mat-tab #addCategory>
      <ng-template mat-tab-label>
        <div color="white" class="center">Add category</div>
      </ng-template>
    </mat-tab>
</mat-tab-group>

代码背后：

public selectedTab(e) {
    if (e.index == 1 + this.mCase.Tables.length) {
      //Add new category
      this.CreateTable();
      this.selectedIndex = this.mCase.Tables.length;
    }
Promise.resolve().then(() => this.selectedIndex = e.index);
}

Answer 1

您可以尝试添加如下按钮：

<mat-tab-group>
  <mat-tab>
    <ng-template mat-tab-label>
       Basic Details
    </ng-template>
  </mat-tab>
  <mat-tab disabled>
        <ng-template mat-tab-label>
            <button mat-icon-button (click)="foo()">
                <mat-icon>add_circle</mat-icon>
            </button>
        </ng-template>
    </mat-tab>
</mat-tab-group>

工作示例：https://stackblitz.com/edit/angular-zrklwg

顺便说一句，如果你被禁用样式的按钮所困扰，你可以用一些自定义CSS覆盖它！：d

Answer 2

您可以在点击按钮的.blur()上使用event.currentTarget。 .blur()与.focus()方法相反，将从元素中移除焦点。

在你的问题中，你说：

点击它后，会在它之前创建一个新标签。

你没有添加任何html，所以我只是创建了一个例子，说明如何通过数据绑定数组动态地将按钮附加到html。

this.buttons.splice(clickedButtonIndex, 0, {Name: "New Button"});

要了解其工作原理，请参阅此answer。

这是组件代码的关键，您可以使用它来模糊对元素的关注。

addButton(clickedButtonIndex, event){
    this.buttons.splice(clickedButtonIndex, 0, {Name: "New Button"});
    event.currentTarget.blur();
}

工作示例： https://stackblitz.com/edit/angular-vslscm

在示例中，我在css中设置了红色背景，以便在聚焦时应用于按钮。您可以看到，当您单击按钮时，它会在再次切换之前暂时变为红色。单击按钮将在单击按钮之前添加一个新按钮。

Angular unfocus选项卡并将焦点设置到不同的选项卡

2 个答案: