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

Question

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

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

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

假设，我有 country/cities.

的树

在一页上，我需要在 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 元素 show/hide。

但我需要分离模板并动态加载它们。

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>

打字稿：

showWithoutLabel = false;

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

How to dynamically change template in Angular?

angular

angular5

angular8