在 Angular Material Md-tabs 中添加新选项卡后滚动到最后一个选项卡

【问题标题】：Scroll to the last tab after adding a new tab in Angular Material Md-tabs在 Angular Material Md-tabs 中添加新选项卡后滚动到最后一个选项卡
【发布时间】：2018-09-28 21:02:29
【问题描述】：

我有一个实现，我可以添加新的 md-tabs。选项卡像菜单一样水平放置。当我点击“添加标签”按钮时，md-tabs 应该滚动到最后一个（到新添加的）。如何做到这一点？

【问题讨论】：

scrollIntoView 怎么样

标签： angular angular-material angular2-md-tabs

【解决方案1】：

对于材料 2，您可以使用，在 selectedIndex 上使用 2 方式绑定，[(selectedIndex)]="number"。

如果您的添加选项卡按钮将一个新对象推送到数组中，您可以编写

 <mat-tab-group [(selectedIndex)]="tabArray.length">
  <mat-tab label="First">
    <ng-template matTabContent>
      The First Content
    </ng-template>
  </mat-tab>
  <mat-tab label="Second">
    <ng-template matTabContent>
      The Second Content
    </ng-template>
  </mat-tab>
</mat-tab-group>

<button mat-button (click)="pushNewTab('three')>Add tab</button>

在组件中

public tabArray = ['one', 'two']
public pushNewTab(newtab) {
  this.tabArray.push(newtab);
}

【讨论】：