**解决方案1（* ngIf）**

Question

我正在处理像树视图这样的组件。这是我的树视图模板：

<div>{{templateData?.text}}">1</div>
<div class="row" *ngFor="let child of templateData?.children">
    <tree-view [templateData]="child" ></tree-view>
</div>

我在tree-view.component.ts中将templateData作为@Input（）templateData。在我的app.component.html：

<tree-view [templateData]="templateData"></tree-view>

在app.component.ts中，我通过调用api获取templateData：

this.templateService.getTemplateData().subscribe(data => {
    this.templateData = data;
});

但是当我的树视图组件加载时，this.templateData还没有初始化，当this.templateData更新时如何重新加载组件内容？

Answer 1

您提供了少量代码，因此我会尽量回答您的问题。我能想到两种快速解决方案。

**解决方案1（* ngIf）**

您可以在树视图组件上使用* ngIf，在这种情况下，您正在使组件“等待”，以便在渲染之前初始化数据。

<tree-view *ngIf="templateData" [templateData]="templateData" ></tree-view>

解决方案2（ngOnChanges）

您可以使用树视图Component ngOnChanges的Component Lifecycle Hook在输入数据发生更改时执行逻辑。

ngOnChanges(changes: SimpleChanges) {
    // only run when property "data" changed
    if (changes['data']) {
       // Custom Logic here
    }
}

在这种情况下， data 是你的@Input（）值。

我可以在您的代码中看到另一个错误：

<div>{{template?.text}}">1</div>

存在HTML错误。删除引号或整个部分“＆gt; 1

<div>{{template?.text}}>1</div> or <div>{{template?.text}}</div>

PS。我希望我能帮助你。在任何情况下，我建议您提供整个树视图组件TS文件以及您正在初始化数据的app.component.ts块。

Angular 4使用输入加载递归模板

1 个答案:

**解决方案1（* ngIf）**

解决方案2（ngOnChanges）