Question

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

<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

您需要使用* 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

Answer 2

Structural directives适合你。

本指南介绍了Angular如何使用结构指令操作DOM，以及如何编写自己的结构指令来执行相同的操作。

在Angular 2中创建dom元素

2 个答案: