如何获取活动选项卡在角材2

我想要得到哪个tab是活动的。我尝试使用装饰器并使用@ViewChild修饰器并以这种方式访问元素属性，但它返回null。如何获取活动选项卡在角材2

组件：

import {Component, OnInit, ViewChild} from '@angular/core'; 

@Component({ 
    selector: 'material-app', 
    template: ` 
    <md-tab-group #tabGroup> 
     <md-tab label="Tab 1">Content 1</md-tab> 
     <md-tab label="Tab 2">Content 2</md-tab> 
    </md-tab-group> 
    ` 
}) 
export class AppComponent implements OnInit { 

    @ViewChild('tabGroup') tabGroup; 

    constructor() { 
    } 

    ngOnInit() { 
    console.log(this.tabGroup); // MdTabGroup Object 
    console.log(this.tabGroup.selectedIndex); // null 
    } 

}

Plunker Preview

来源

2017-01-14 Gabriel

嗯，我不知道如果我深知你的问题，因为默认情况下，该指数始终从零开始除非你手动设置计数[selectedIndex]property。

无论如何，如果你真的想看到初始化选择哪个选项卡，你可以实现AfterViewInit接口，并执行以下操作：如果您要检查其标签是

export class AppComponent implements AfterViewInit, OnInit { 

... 

    ngAfterViewInit() { 
    console.log('afterViewInit => ', this.tabGroup.selectedIndex); 
    } 
}

在另一方面，选择的依据改变（什么更有意义），在这里你去：

HTML：

<md-tab-group #tabGroup (selectedTabChange)="tabChanged($event)"> 
    <md-tab label="Tab 1">Content 1</md-tab> 
    <md-tab label="Tab 2">Content 2</md-tab> 
</md-tab-group>

组件：

tabChanged = (tabChangeEvent: MatTabChangeEvent): void => { 
    console.log('tabChangeEvent => ', tabChangeEvent); 
    console.log('index => ', tabChangeEvent.index); 
}

DEMO

来源

2017-01-14 23:55:27 developer033

第二种情况是什么，我一直在寻找，但第一个是太了解的。谢谢@ developer033！ – Gabriel

嗨！我使用这段代码，并且出现“this.tabGroup”未定义的错误。只有在onSelectChange Angular“看到”这个DOM元素之后。这就像ngAfterViewInit（）不适合我。你知道发生了什么事吗？ – Roberto

对于第一个选项，您将如何获得在初始化时自动选择的选项卡的_name_（而不是索引）？ – FiringBlanks

根据材料文档角翼片材料上输出标签改变的事件 @Output（）selectedTabChange：EventEmitter

您的模板：

<mat-tab-group (selectedTabChange)="tabChanged($event)"> 
     <mat-tab> 
     <ng-template mat-tab-label>Tab 1</ng-template> 
     Tab Content 
     </mat-tab> 
     <mat-tab> 
     <ng-template mat-tab-label>Tab 2</ng-template> 
     Tab Content 
     </mat-tab> 
    </mat-tab-group>

您的打字稿：

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

public tabChanged(tabChangeEvent: MatTabChangeEvent): void { 
    console.log(tabChangeEvent); 
}

来源

2017-11-21 14:59:19

如何获取活动选项卡在角材2

回答

相关问题