在Angular Material中,要在展开面板时更改面板标题,可以使用MatExpansionPanelHeader
指令和@ViewChild
装饰器来获取面板标题元素并修改其内容。
首先,在组件的模板中,使用MatExpansionPanel
和MatExpansionPanelHeader
指令来创建展开面板,并将#panelHeader
赋值给面板标题元素:
{{ panelTitle }}
Panel content
然后,在组件的类中,使用@ViewChild
装饰器来获取面板标题元素的引用:
import { Component, ViewChild } from '@angular/core';
import { MatExpansionPanelHeader } from '@angular/material/expansion';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponent {
@ViewChild('panelHeader') panelHeader: MatExpansionPanelHeader;
panelTitle = 'Panel Title';
togglePanel() {
// 更改面板标题
this.panelHeader._elementRef.nativeElement.innerText = 'New Panel Title';
}
}
在上面的例子中,@ViewChild('panelHeader')
将面板标题元素的引用存储在panelHeader
变量中。然后,可以在togglePanel
方法中使用panelHeader._elementRef.nativeElement.innerText
来更改面板标题的内容。
最后,在需要更改面板标题的地方调用togglePanel
方法,例如在按钮的点击事件中:
这样,当点击按钮时,面板标题将更改为"New Panel Title"。