在 Angular 中创建 dom 个元素 2

Question

在组件中动态创建 DOM 元素的最简单方法是什么？我有一个从 API 加载的树模型（带有 paramId 参数的项目），我需要将它们打印到嵌套列表中，例如

<ul>
    <li>List item one</li>
    <li>List item two with subitems:
        <ul>
            <li>Subitem 1</li>
            <li>Subitem 2</li>
        </ul>
    </li>
    <li>Final list item</li>
</ul>

Answer 1

Structural directives适合你。

This guide looks at how Angular manipulates the DOM with structural directives and how you can write your own structural directives to do the same thing.

Answer 2

您需要使用 *ngFor 在 angular2

中动态创建 dom 元素

<ul>
 <ng-template #recursiveList let-list>
<li *ngFor="let item of list">
  {{item.title}} // just assuming
  <ul *ngIf="item.children.length > 0">
    <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.children }"></ng-container>
  </ul>
</li>
</ng-template>
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: list }"> </ng-container>
</ul>

您需要根据您的型号更改代码

请检查gist

在 Angular 中创建 dom 个元素 2

Creating dom elements in Angular 2

angular2-template

angular