Angular：如何將組件動態添加到父儀表板組件？

Question

我有兩個組件。 一個是卡片儀表板（使用ng generate @angular/material:material-dashboard --name=my-dashboard創建），卡片的創建方式如下：

<div class="grid-container">
 <h1 class="mat-h1">Dashboard</h1>
 <mat-grid-list cols="2" rowHeight="350px">
  <mat-grid-tile *ngFor="let card of cards" [colspan]="card.cols" [rowspan]="card.rows">
   <mat-card class="dashboard-card">
    <mat-card-header>
     <mat-card-title> {{card.title}}
      <button mat-icon-button class="more-button" [matMenuTriggerFor]="menu" aria-label="Toggle menu">
       <mat-icon>more_vert</mat-icon>
      </button>
      <mat-menu #menu="matMenu" xPosition="before">
       <button mat-menu-item>Expand</button>
       <button mat-menu-item>Remove</button>
      </mat-menu>
     </mat-card-title>
    </mat-card-header>
    <mat-card-content class="dashboard-card-content">
      <div>{{ card.content }}</div>
    </mat-card-content>
   </mat-card>
  </mat-grid-tile>
 </mat-grid-list>
</div>

並且是這樣填充的：

export class DashComponent {
 cards = [
  { title: 'Character', cols: 2, rows: 1, content: '<app-character-sheet></app-character-sheet>' },
  { title: 'Card 2', cols: 1, rows: 1 },
  { title: 'Card 3', cols: 1, rows: 2 },
  { title: 'Card 4', cols: 1, rows: 1 }
 ];
}

我想用不同的組件填充卡片。 但是當我像上面看到的那樣（使用content變量）去嘗試時，HTML 沒有解析選擇器。 該卡僅包含字面內容： 。

如何用組件動態填充我的卡片？

干杯

Answer 1

如果你真的需要動態插入組件，請閱讀這篇文章。

替代解決方案是使用結構指令，如ngIf或ngSwitchCase，用於內容選項集有限的情況：

<mat-card-content class="dashboard-card-content">
  <div *ngIf="card.content"><app-character-sheet></app-character-sheet></div>
</mat-card-content>

您可以不安全地插入 HTML 而不進行后期處理（但不建議這樣做）：

<div [innerHTML]="card.content"></div>