代码之家  ›  专栏  ›  技术社区  ›  alphapilgrim

如何将动态值传递给maticon?

  •  1
  • alphapilgrim  · 技术社区  · 6 年前

    只是尝试将一个字符串传递到组件输入中,这样我就可以有一个动态图标。这有可能吗? 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 回复  |  直到 6 年前
        1
  •  3
  •   Edric Prince Bansal    6 年前

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