时间戳

首页 > 解决方案 > Angular 11基于另一个元素的渲染有条件地渲染元素

angular - Angular 11基于另一个元素的渲染有条件地渲染元素

问题描述

我正在尝试创建一个自定义扩展面板（我不想使用 Angular Material 的版本），但是由于我的实现方式，我遇到了生命周期挂钩的问题。

此扩展面板以折叠状态开始。它接收一组对象并生成一行按钮（每个对象一个按钮，按钮的文本是从对象中的属性中提取的）。这些按钮的右侧是“显示全部”按钮。这就是事情变得复杂的地方。我想根据按钮是否已包裹到第二行（由于包含跨度的设置高度而最初隐藏）有条件地显示“全部显示”。如果某些按钮文本很长或者要生成的按钮列表很长，就会发生这种情况。这目前正在通过执行以下操作：

模板

  <span #ButtonGroup>
    <button *ngFor="let but of AllButtons">{{but.Title}}</button>
  </span>
  <span id="see-all">See All ({{AllButtons?.length}})</span>

打字稿

constructor(private _renderer:Renderer2) { }

ngOnViewChecked():void {
   ...
   //By checking if the current height is greater than half the total height then we can be fairly certain that we only have 1 row
   if(this.ButtonGroup.nativeElement.clientHeight > (0.5 * this.ButtonGroup.nativeElement.scrollHeight)) {
       this._renderer.setAttribute(thing,"hidden","true");
   }
}

我的主要问题是，这仅在第一次运行时才有效。如果用户更改了父对象（从而更改了应该生成的按钮），则 ngOnViewChecked 在 ngFor 呈现新的按钮集之前运行（尽管“显示全部”跨度确实具有正确呈现更新的长度）。由于我依靠 ButtonGroup 的 clientHeight/scrollHeight 有条件地显示“全部显示” - 在生命周期挂钩运行时没有完成此渲染会造成相当多的麻烦。

我是否使用了错误的生命周期挂钩？或者是否有更好的方法来解决这个问题，而不是依赖于渲染的大小？任何帮助将不胜感激。

标签： angulartypescript

解决方案

推荐阅读