显示css类更改后初始化组件

Question

我有选项卡组件。我正在添加"style.display"：选项卡处于活动状态(可见(时为"block"，隐藏时为"none"。

在每个选项卡中显示的组件中，当另一个元素的高度小于例如100px时，我隐藏按钮；我使用

ngAfterViewInit() {
const wrapper = this.elRef.nativeElement?.querySelector('.wrapper');
const height = wrapper?.offsetHeight ?? 100;
if(height <= 100) {
this.renderer.setStyle(this.button.nativeElement, 'display', 'none');
}
}

对于当前在屏幕上可见的选项卡，它运行良好——我的意思是，当我选择选项卡并刷新页面时，页面按钮是隐藏的，但对于其他选项卡，组件包装的高度为=0，因为这些选项卡的"display"设置为"none"。选项卡中显示的所有组件都会立即初始化。

问题是：更改选项卡时，应如何重新渲染视图？

Answer 1

您可以通过将此方法放在选项卡更改上来重新加载父组件。

this._document.defaultView.location.reload();

要执行此操作，您应该在构造函数中注入_document：

constructor(
@Inject(DOCUMENT) private _document: Document) {

}这将重新呈现视图。