Angular:如何动态添加组件到父Dashboard组件？
Angular:如何动态添加组件到父Dashboard组件？
提问于 2018-05-31 03:10:16
我有两个组件。一个是卡片的仪表板(使用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 }
];
}我想用不同的组件填充卡片。但是，当我像上面看到的那样尝试(使用HTML 变量)时，并没有解析选择器。卡片只包含文字内容：。
如何用组件动态填充我的卡片？
干杯
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-05-31 03:22:27
如果你真的需要动态插入组件，请阅读this文章。
另一种解决方案是在内容选项集有限的情况下使用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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50611897
复制相关文章
相似问题