我有:
<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)
事件。检查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']);
}
您需要从@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;
}
}
您可以将ngKeypress(Angular Documentation here)用于任何HTML标记。例如:
<anyHtmlTag ng-keypress="yourFunction($event)">
yourFunction(evt){
if(evt.code === "Tab"){
//Do your stuff
}
}