如何在Angular中动态更改模板？

Question

我有一个通用的抽象树组件。

我需要能够根据条件动态更改此组件的模板吗？

我认为树逻辑应该单独使用。而且我必须使用树服务创建具有不同模板的两个组件，不是吗？

假设，我有一个国家/城市的树。

在一页上，我需要以DOM结构显示它：

<div class="root">
    <div class="parent">
       <div class="children"></div>
    </div>
</div>

在另一页中，我需要显示相同的DOM，但有所不同。

  <div class="root">
        <div class="parent">
           <div class="children"><label></label><input></div>
        </div>
    </div>

因此，当然我可以使用一个模板并使用*ngIf确定显示/隐藏哪个DOM元素。

但是我需要分离模板并进行动态加载。

Answer 1

显示基于变量的模板。要选择模板，请使用*ngIf。让我举一个例子：

共享组件的HTML：

<ng-container *ngIf="showWithoutLabel; else showWithLabel">
    <div class="root">
        <div class="parent">
           <div class="children"></div>
        </div>
    </div>
</ng-container>
<ng-template #showWithLabel>
    <div class="root">
        <div class="parent">
           <div class="children"><label></label><input></div>
        </div>
    </div>
</ng-template>

TypeScript：

showWithoutLabel = false;