Question

在解决问题之前，我遇到了一些现有代码的问题。

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

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

和具有此结构的模板（解释为）

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

变量1和2设置为@Input s

它们是可选的。因此，我们要检查的是选择器中是否已为其提供值。如果是这样，我们将模板中的变量设置为该值。从本质上讲，将变量值从选择器传递到我们的模板中以进行渲染。

第一个逻辑如下：

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

这很好用。该模板将content1表示为通过@input传入的variable1的值。

但是，我不能在ngAfterContentInit()中为变量2输入相同的逻辑。这样做会导致this.content2为空。

我发现我可以将相同的逻辑放在this.content2钩子中来设置ngAfterViewChecked()，它将在那儿工作。但是，仅第二次调用ngAfterViewChecked()（及其后的每次）都需要“花费”。

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

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

这感觉非常丑陋！

了解angular的生命周期挂钩和带有嵌套for循环的模板

0 个答案: