是否可以在 Angular 2/4/5 Material 中向 mat-card 添加样式/属性指令

Question

在 Angular 2、Angular 4 和 Angular 5 中（更多可能会出现相同的问题）。

当向 ma​​t-card 指令添加自定义指令时不起作用并且会破坏卡片的样式。

有没有办法解决这个问题？

Answer 1

我找到了解决该问题的方法。

• 创建指令
• 参考Using an Angular Directive to Add Class to Host Element 使用renderer2 添加/删除一个类
• 请参见下面的代码（自定义指令的内部），请原谅 States.ok 等等同于“ok”的代码

protected _state = States.ok;

    @Input('state')
    public set state(value: string) {
        console.log('CARD STATE: ', value);
        switch (value) {
            case States.ok:
            case States.warn:
            case States.danger:
                // this.elementClass = 'app-dashboard-card-' + value;
                this.setClass(value);
                break;
            default:
                throw new Error('DashboardItemComponent: state not recognised');
        }
        this._state = value;
    }

    constructor(private renderer: Renderer2, private hostElement: ElementRef) {
        renderer.addClass(hostElement.nativeElement, 'custom-theme');
    }

    setClass(state: string) {
        this.renderer.removeClass(this.hostElement.nativeElement, OK_CLASS);
        this.renderer.removeClass(this.hostElement.nativeElement, WARN_CLASS);
        this.renderer.removeClass(this.hostElement.nativeElement, DANGER_CLASS);
        this.renderer.addClass(this.hostElement.nativeElement, 'app-dashboard-card-' + state);
    }