1

一直在努力解决我在处理一些现有代码时遇到的问题。

它是一个在 HTML 中带有选择器的组件，如下所示：

<div my-component [option1]='hello' [option2]='world'></div>

和具有这种结构的模板（释义）：

<div>
    <span>{{content1}}</span>
    <ng-container *ngFor="...">
        <span>{{content2}}</span>
    </ng-container>
</div>

变量 1 和 2 设置为@Inputs

它们是可选的。所以我们想要做的是检查它们是否在选择器中被赋予了一个值。如果是这样，我们将模板中的变量设置为该值。本质上是将选择器中的变量值传递到我们的模板中以呈现内容。

所以第一个的逻辑是这样的：

ngAfterContentInit() {
    if (this.variable1) {
        this.content1 = this.variable1;
    }
}

这很好用。模板将 content1 呈现为通过 @input 传入的 variable1 的值。

但是，我不能将 variable2 的相同逻辑放入ngAfterContentInit(). 这样做会导致this.content2为空。

我发现我可以将相同的逻辑设置this.content2在ngAfterViewChecked()钩子内部，它会在那里工作。但是，它只“需要”第二次ngAfterViewChecked()被调用（以及之后的每次）。

我唯一的想法是第一个生命周期钩子不等待 for 循环完成。当存在 for 循环时，我觉得我缺少对将变量传递到模板的理解。

目前，我的解决方案是获取 variable2 的值ngAfterContentInit()并将其传递给第三个变量，然后我用它来设置 content2 in ngAfterViewChecked()。我有一个计数器，所以我只尝试设置它两次（任何进一步的调用ngAfterViewChecked()都不会尝试重置 content2）

不过，这感觉非常难看！

4

0 回答 0