Question

我关注此链接（https://coursetro.com/posts/code/29/Working-with-Angular-2-Material），使用Angular Material在我的网站上创建标题，该标题在md-tab-group内提供了现成的按钮。

例如，我的head-component html是这样的：

<md-tab-group>
    <md-tab label="1">
        <app-1></app-1>
    </md-tab>
    <md-tab label="2">
        <app-2></app-2>
    </md-tab>
</md-tab-group>

现在，我可以在同一网址中切换第1页和第2页。

问题是，除了在具有相同URL的那些页面之间导航之外，我想在两个具有相同功能的页面的主体中添加一个按钮。

由于这种特殊性，我无法使用<a href>或<a routerLink>，因为它需要更改网址。

正因为如此，我努力添加一个与我点击标题中的md-tab-group字样时相同的按钮。

如果有人知道如何继续，请提前感谢您！

Answer 1

由于您使用的是标签，因此您可以使用selectedIndex提供的md-tab-group属性。将click事件添加到正文中的按钮，将选项卡索引传递给设置selectedIndex的活动选项卡的函数。

以下是一个例子：

HTML：

<md-tab-group [selectedIndex]="tabIndex">
  <md-tab *ngFor="let tab of tabs; let i=index">
    <ng-template md-tab-label>
      {{ tab.label }}
    </ng-template>
    <h1>{{ tab.body }}</h1>
    <div *ngFor="let x of [1, 2, 3, 4, 5]">
      <button *ngIf="x != i+1" md-raised-button color="warn" (click)="selectedTab(x)">
        <span>Go To Tab {{x}}</span>
      </button>
    </div>
  </md-tab>
</md-tab-group>

TS：

  tabIndex: number = 2;

  tabs = [
    { label: 'Tab 1', body: 'Tab 1 Body' },
    { label: 'Tab 2', body: 'Tab 2 Body' },
    { label: 'Tab 3', body: 'Tab 3 Body' },
    { label: 'Tab 4', body: 'Tab 4 Body' },
    { label: 'Tab 5', body: 'Tab 5 Body' }
  ];

  selectedTab(index){
    this.tabIndex = index - 1;
  }

Plunker demo

使用按钮

1 个答案: