使用MatTabNav部分的_selectedIndex更改事件,并添加一个小延迟以解决切换太快的问题。
HTML模板:
组件:
import { Component, ViewChild } from '@angular/core';
import { MatTabGroup } from '@angular/material';
import { Observable, of } from 'rxjs';
import { delay } from 'rxjs/operators';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
@ViewChild('matTabs') matTabs: MatTabGroup;
tabs = ['Tab 1', 'Tab 2', 'Tab 3'];
onTabChange(event: any) {
// ...your code
}
onSelectedIndexChange(event: any) {
// Add a little delay to avoid tab toggling
const observable: Observable = of(event).pipe(delay(50));
observable.subscribe(() => {
this.matTabs.selectedIndex = event.index;
});
}
}