如何将动态值传递给matIcon?

时间:2018-07-11 16:15:45

标签: angular angular-material

只需尝试将字符串传递到组件输入中,这样我就可以拥有一个动态图标。这可能吗? 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>

1 个答案:

答案 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"