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

Posted 2023-03-13

【中文标题】查看初始化后的角度设置变量

【英文标题】：Angular set variable after View Init

【发布时间】：2020-12-22 12:59:42

【问题描述】：

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

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

isOverflown: boolean;
hasExpandButton: boolean;

[...]

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

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

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

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

我可能想到了 ngAfterContentInit 并使用变量来检测是否第一次调用 ngAfterContentInit，但这对我也不起作用。

提前谢谢你。

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

【问题讨论】：

通常你在 css 中管理溢出（和省略号）

【参考方案1】：

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

【参考方案2】：

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

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

这样你就可以摆脱额外的组件逻辑

【讨论】：

这究竟是做什么的，为什么这能解决我的问题？

嗨 Lars，它只是一个 css 类，您可以将其应用于任何溢出某些内容的元素，以便应用“3 点”（自动）指示有更多文本，请参见此处的示例：@ 987654321@

我怎样才能触发一个按钮来展开完整的消息？

isOverflown(e: HTMLEelement): boolean return e.offsetWidth