css - 查看初始化后的角度设置变量

Question

情况： 目前我的网站上有两个选项卡，都包含一个文本。文本有一个固定的高度，内容溢出不显示（溢出：隐藏）。

问题： 如果我的文本溢出，我想添加三个点（图标）。为了检测是否发生溢出，我使用以下表达式，它完美地工作并在发生溢出时添加一个 expandButton。

isOverflown: boolean;
hasExpandButton: boolean;

[...]

const overflown = this.isOverflown() ? this.hasExpandButton = true : this.hasExpandButton = false;

问题是，我不知道我应该在哪里检查我的内容是否溢出，因为我在两个不同的位置（这里：标签）使用了这个语句。

如果我选择 ngAfterViewInit，如果我的内容在第一个选项卡上溢出，则 const overflown 将设置为 true。但不在第二个选项卡上（如果内容也溢出）。这样做的原因是，视图仅在第一个选项卡上呈现，而不在第二个选项卡上呈现。因此，如果我切换到第二个选项卡，ngAfterViewInit 将不会触发。

我也尝试使用其他生命周期钩子，但它们都不适合我。

我想也许关于 ngAfterContentInit 并使用变量来检测是否第一次调用 ngAfterContentInit ，但这对我也不起作用。

先感谢您。

解决方案 我禁用了这个组件的延迟加载并解决了这个问题。

Answer 1

尝试使用 CSS 解决这个问题：

.txt-overflow {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

所以你可以摆脱额外的组件逻辑

Answer 2

您可以在视图初始化 (ngAfterViewInit) 和用户切换选项卡后检查它 - 将 (click)="checkOverflow()" 添加到 html 中的选项卡标记。