只需尝试将字符串传递到组件输入中,这样我就可以拥有一个动态图标。这可能吗? Stackblitz demo
@Component({
selector: 'app-alert',
template: `
<mat-icon class="alert--{{context}}" *ngIf="icon">{{icon}}</mat-icon>
`,
})
export class AlertComponent implements OnInit {
@Input() context: string;
@Input() icon: string;
@Input() message: string;
constructor() {}
ngOnInit() {}
}
<mat-icon>home</mat-icon>
<app-alert [context]="'primary'" [icon]="'check'" [message]="'blah message working'"></app-alert>
答案 0 :(得分:3)
您的代码基本上是正确的。
尽管通过数据绑定CSS类的方式破坏了材质图标字体,因为它删除了将文本转换为svg图标所需的原始类。
更改此:
<mat-icon class="alert--{{context}}" *ngIf="icon">{{icon}}</mat-icon>
对此:
<mat-icon [className]="'mat-icon material-icons alert--'+context" *ngIf="icon">{{icon}}</mat-icon>
或首选:
<mat-icon [ngClass]="'alert--'+context" *ngIf="icon">{{icon}}</mat-icon>
ngClass
仅将给定的字符串附加到类属性上,而className
覆盖它。
出于学习目的: 实际上,还有一种方法可以绑定静态CSS类,这是最好的。
[class.myClass]="expression"
ex:
[class.myClass]="true"
会产生:
class="myClass"