Angular 2如何“观察”标签的变化
Angular 2如何“观察”标签的变化
提问于 2017-02-06 09:12:40
我有：
<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']);
}回答 3
Stack Overflow用户
发布于 2017-02-06 09:34:18
您需要从md-tab组件将事件发布为@Output。类似于：
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;
}
}Stack Overflow用户
发布于 2020-04-21 01:22:23
这很容易做到，如下所示
<md-tab-group color="primary" (click)="selectedTabIndex=tabRef.selectedIndex" #tabRef>
<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>唯一要做的就是在你的组件中定义一个全局变量。
export class MyComponent implements OnInit{
selectedTabIndex=0;
ngOnInit(){
//
}
}Stack Overflow用户
发布于 2020-04-22 06:06:08
文档指出，在激活选项卡之前，you选项卡的内容不会注入到DOM中。因此，您可以使用@HostListener注释捕获组件上的DOM事件：
<md-tab-group color="primary">
<md-tab label="Проэкты">
<my-cool-tab1></my-cool-tab1>
</md-tab>
...
</md-tab-group>组件：
@Component({selector: 'my-cool-tab1', ...})
export class MyCoolTab1Component {
@HostListener('DOMNodeInsertedIntoDocument')
foo() {
console.log('Tab activated');
}
@HostListener('DOMNodeRemovedFromDocument')
foo2() {
console.log('Tab deactivated');
}
}更新:这不适用于FF%(
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42059151
复制相关文章
相似问题