在组件中放置一个可选的<md-card>

Question

我试图使用Angular 2 Material制作一张可选的md卡...我已经制作了一个卡片中有大量内容的组件，我希望能够切换卡片使用传递给组件的布尔值打开和关闭样式。

因为md-card指令不支持这一点，所以我尝试通过[class.mat-card]="myBool"直接使用底层CSS类。这仅适用于之前页面上存在<md-card>的情况，否则mat-card样式将不会注入DOM ...

我可以通过复制我的内容来实现这一点，但我想避免这样做......例如：

<md-card *ngIf="myBool">
    [My Content]
</md-card>
<div *ngIf="!myBool">
    [My Duplicated Content]
</div>

有更好的方法吗？

Answer 1

未经测试，但这应该有效：

<md-card [ngClass]="{'classA': myBool, 'classB': !myBool}">
    [My Content]
</md-card>

此致 迭。