如何在angular 8.0中創建動態div標簽？

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>