Angular 2如何"观察"标签更改

Question

我有:

<md-tab-group color="primary">
  <md-tab label="???????">
    <h1>Some tab content</h1>
  </md-tab>
  <md-tab label="????????">
    <h1>Some more tab content</h1>
    <p>...</p>
  </md-tab>
</md-tab-group>

我需要在单击特定选项卡时捕获事件并在我的组件中调用此函数:

onLinkClick() {
  this.router.navigate(['contacts']); 
}

Answer 1

你可以使用这个(selectedTabChange) 活动.检查Material2#tabs.

模板:

<mat-tab-group color="primary" (selectedTabChange)="onLinkClick($event)">
  ...
</mat-tab-group>

组件:

import { MatTabChangeEvent } from '@angular/material';

// ...

onLinkClick(event: MatTabChangeEvent) {
  console.log('event => ', event);
  console.log('index => ', event.index);
  console.log('tab => ', event.tab);

  this.router.navigate(['contacts']); 
}