Question

我希望得到哪个tab有效。我尝试使用@ViewChild装饰器并以这种方式访问元素属性，但它返回null。

组件：

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

Answer 1

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

无论如何，如果你真的想知道在初始化上选择了哪个标签，你可以实现property界面并执行以下操作：

AfterViewInit

另一方面，如果您想根据更改（更有意义）检查选择了哪个标签，请点击此处：

<强> HTML：

export class AppComponent implements AfterViewInit, OnInit {

...

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

<强>组件：

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

DEMO

Answer 2

根据材料文档，Angular Material选项卡在选项卡更改CREATE OR REPLACE FUNCTION set_audit_fields() RETURNS TRIGGER AS $$ DECLARE audit_user UUID; BEGIN -- Postgres 9.6 will offer current_setting(..., [missing_ok]) which makes the exception handling obsolete. BEGIN audit_user := current_setting('audit.AUDIT_USER'); EXCEPTION WHEN OTHERS THEN audit_user := NULL; END; IF TG_OP = 'INSERT' THEN NEW.inserted_by := audit_user; ELSE NEW.updated_by := audit_user; END IF; RETURN NEW; END; $$ LANGUAGE plpgsql;

上输出事件

您的模板：

@Output() selectedTabChange: EventEmitter<MatTabChangeEvent>

你的打字稿：

<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>

Answer 3

“ @角度/材质”：“ ^ 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

<mat-tab-group #tabGroup (focusChange)="tabChanged($event)" [selectedIndex]="1">
    <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>

Answer 4

这是您如何获得活动angular material标签中的活动index

.html文件

<div>    
<mat-tab-group #tabRef (selectedTabChange)="logChange(tabRef.selectedIndex)">
  <mat-tab label="ALL"></mat-tab>
  <mat-tab label="Delivered"></mat-tab>
  <mat-tab label="Pending"></mat-tab>
  <mat-tab label="Cancelled"></mat-tab>
</mat-tab-group>    
</div>

.ts文件

logChange(index)
{
  console.log(index);
}

别忘了在app.module.ts文件中添加导入

import { MatTabsModule } from '@angular/material/tabs';

Answer 5

默认情况下，索引为 0 的选项卡由 mat-tab-group 显示。稍后选择其他选项卡，索引也会更改。这可以通过 MatTabChangeEvent

检测到

HTML 内容

    <mat-tab-group (selectedTabChange)="onTabChange($event)">
    
        <mat-tab label="First Tab">
         <p>Hello, Tab 0</p>
        </mat-tab>
    
        <mat-tab label="Second Tab">
         <p>Hello, Tab 1</p>
        </mat-tab>
    
        <mat-tab label="Third Tab">
         <p>Hello, Tab 2</p>
        </mat-tab>
    
    </mat-tab-group>

.ts 文件内容

onTabChange(event : MatTabChangeEvent) {
    
    console.log(event.index);
    // do something based on selected tab index
}

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

5 个答案: