Question

如何在angular 8.0中创建动态div标签？

我想克隆整个div标签，并且在div标签内有多个组件，例如文本框，选择框等。

Answer 1

让我们假设我们有一个下面列出的组件，该组件将动态加载。

import { Component, Input } from '@angular/core';
@Component({
selector: 'app-message',
    template: `<div class="message">{{message}}</div>
})

export class MessageComponent {
@Input() message: string;
}

要动态加载MessageComponent，您需要一个容器。假设我们要在AppComponent中加载MessageComponent。我们在AppComponent中需要一个容器元素。

<div style="text-align:center">
 <h1>
     Welcome to {{ title }}!
 </h1>
 <template #messagecontainer>
 </template>
</div>

如您所见，我们有一个入口点模板或一个容器模板，在其中我们将动态加载MessageComponent

Answer 2

简单问题，简单答案：使用模板插座。

<ng-container *ngTemplateOutlet="content"></ng-container>
<ng-container *ngTemplateOutlet="content"></ng-container>
<ng-container *ngTemplateOutlet="content"></ng-container>

<ng-template #content>
  <p>
    This is some random content that you can duplicate
  </p>
</ng-template>

如何在angular 8.0中创建动态div标签？

2 个答案: