可以通过Angular的观察者模式来实现当选取不同的标签页时更新内容的功能。
首先,在组件的构造函数中定义一个标签页被激活事件(tabActivated$)的Subject对象,并在对应方法中进行订阅。然后,在HTML模板文件中使用Angular Material中的MatTabGroup组件,并添加(tabChange)事件绑定。事件绑定中传入的函数会在每次切换标签页时调用。
代码示例如下:
import { Component, OnInit } from '@angular/core';
import { Subject } from 'rxjs';
@Component({
selector: 'app-tab',
templateUrl: './tab.component.html',
styleUrls: ['./tab.component.css']
})
export class TabComponent implements OnInit {
// 定义Subject对象
tabActivated$: Subject = new Subject();
constructor() { }
ngOnInit() {
// 订阅标签页被激活事件
this.tabActivated$.subscribe((tabNumber) => {
console.log('Activated tab ' + tabNumber);
// 在这里更新对应的内容
});
}
// 标签页被激活时调用的方法
tabActivated(tabNumber: number) {
// 发射标签页被激活事件
this.tabActivated$.next(tabNumber);
}
}
HTML模板文件代码示例:
Content for Tab 1
Content for Tab 2
在上面的代码示例中,我们定义了一个Subject对象,同时也定义了一个方法tabActivated,该方法会在每次标签页被激活时调用,并通过发射标签页被激活事件来通知组件