Helpex - Trao đổi & giúp đỡ Đăng nhập
40

Tôi muốn lấy tab nào đang hoạt động. Tôi đã cố gắng sử dụng trình @ViewChildtrang trí và truy cập các thuộc tính phần tử theo cách đó, nhưng nó trả về null.

Thành phần:

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
  }

}

Xem trước Plunker

40 hữu ích 0 bình luận 75k xem chia sẻ
73

Chà, tôi không chắc liệu mình có hiểu rõ câu hỏi của bạn hay không vì theo mặc định, chỉ mục luôn bắt đầu đếm từ 0 trừ khi bạn đặt [selectIndex] theo cách thủ công property.

Dù sao, nếu bạn thực sự muốn xem tab nào được chọn khi khởi chạy, bạn có thể triển khai AfterViewInitgiao diện và thực hiện như sau:

export class AppComponent implements AfterViewInit, OnInit {

...

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

Mặt khác, nếu bạn muốn kiểm tra tab nào được chọn dựa trên các thay đổi (điều gì có ý nghĩa hơn), thì bạn vào đây:

HTML:

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

Thành phần:

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

DEMO

73 hữu ích 5 bình luận chia sẻ
17

Theo tài liệu Material, các tab Angular Material xuất ra một sự kiện khi thay đổi tab @Output() selectedTabChange: EventEmitter<MatTabChangeEvent>

Mẫu của bạn:

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

Bản đánh máy của bạn:

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

public tabChanged(tabChangeEvent: MatTabChangeEvent): void {
    console.log(tabChangeEvent);
}
17 hữu ích 2 bình luận chia sẻ
10

"@ angle / material": "^ 6.2.1 ". Cách lấy chỉ mục tab đã chọn khi tải (sau khi tải mẫu) và khi tab được lấy tiêu điểm .

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>
10 hữu ích 0 bình luận chia sẻ
0

Đây là cách bạn có thể kích indexhoạt angular materialcác tab đang hoạt động

.html tập tin

<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 tập tin

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

Đừng quên thêm nhập vào app.module.tstệp

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

0 hữu ích 0 bình luận chia sẻ
0

Theo mặc định, tab có chỉ mục 0 được hiển thị bởi mat-tab-group. sau đó khi và khi tab khác được chọn, chỉ mục cũng thay đổi. Điều này có thể được phát hiện bởi MatTabChangeEvent

Nội dung 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>    

nội dung tệp .ts

onTabChange(event : MatTabChangeEvent) {
    
    console.log(event.index);
    // do something based on selected tab index
}
0 hữu ích 0 bình luận chia sẻ
loading
Không tìm thấy câu trả lời bạn tìm kiếm? Duyệt qua các câu hỏi được gắn thẻ angular angular-material2 , hoặc hỏi câu hỏi của bạn.

Có thể bạn quan tâm

loading