私は持っています:
<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']);
}
(selectedTabChange)
eventを使用できます。 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']);
}
ngKeypress(Angular Documentation here )を任意のHTMLタグに使用できます。例えば:
<anyHtmlTag ng-keypress="yourFunction($event)">
yourFunction(evt){
if(evt.code === "Tab"){
//Do your stuff
}
}
@Output
コンポーネントからmd-tab
としてイベントを公開する必要があります。何かのようなもの:
import { EventEmitter, Output, Input, Component } from '@angular/core';
@Component({
selector: 'tab',
template: `
<button (click)="clicked()">{{ name }}</button>
`,
styles: [`
`]
})
export class TabComponent {
@Input() name = 'replaceme';
@Output() tabClicked = new EventEmitter<null>();
clicked() {
this.tabClicked.emit();
}
}
次に、md-tab-group
で次のようなイベントを消費します。
import { Component } from '@angular/core';
@Component({
selector: 'tab-group',
template: `
<!--<tab *ngFor="let tab of tabs" [name]="tab"></tab>-->
<tab *ngFor="let tab of tabs" [name]="tab" (tabClicked)="tabChanged(tab)"></tab>
<div>
{{ selectedTab }}
</div>
`,
styles: [`
`]
})
export class TabGroupComponent {
private tabs = ['foo', 'bar'];
private selectedTab = this.tabs[0];
onInit() {
this.selectedTab = this.tabs[0];
}
tabChanged(tab) {
this.selectedTab = tab;
}
}