如何在Angular Material2中获取活动选项卡

我想获得哪个标签处于活动状态.我尝试使用@ViewChild装饰器并以这种方式访问​​元素属性,但它返回null.

零件:

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

@Component({
  selector: 'material-app',
  template: `
  
      Content 1
      Content 2
  
  `
})
export class AppComponent implements OnInit {

  @ViewChild('tabGroup') tabGroup;

  constructor() {
  }

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

}

Plunker预览

好吧,我不确定我是否理解你的问题,因为默认情况下,除非你手动设置[selectedIndex], 否则索引总是从零开始计数property.

无论如何,如果您真的想要查看在初始化时选择了哪个选项卡,您可以实现该AfterViewInit接口并执行以下操作:

export class AppComponent implements AfterViewInit, OnInit {

...

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

另一方面,如果你想根据变化(更有意义的话)检查选择哪个标签,你可以去:

HTML:

  Content 1
  Content 2

零件:

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

DEMO

根据材料文档,Angular Material选项卡在选项卡更改时输出事件 @Output() selectedTabChange: EventEmitter

你的模板:

  
    Tab 1
    Tab Content
  
  
    Tab 2
    Tab Content
  

你的打字稿:

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

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

“ @ angular / material”：“ ^ 6.2.1 ”。在加载时（加载模板后）以及突出显示标签时获取选定标签索引的方法。

my.component.ts

export class MyComponent implements OnInit, AfterViewInit {
    @ViewChild('tabGroup') tabGroup;

    ngAfterViewInit() {
      console.log(this.tabGroup.selectedIndex);
    }

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

my.component.html

    
        Tab 1
        Tab Content
    
    
        Tab 2
        Tab Content