如何将动态值传递给matIcon？

Question

只是尝试将字符串传递到组件输入中，这样我才能拥有一个动态图标。这可能吗？Stackblitz演示

@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>

Answer 1

您的代码大部分是正确的。

尽管数据绑定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"

例如：

[class.myClass]="true"

会产生：

class="myClass"