是否可以在Angular 2/4/5材质中为mat-card添加style / attibute指令

Question

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

将自定义指令添加到 mat-card 指令时不起作用并弄乱卡片的样式。

有解决方法吗？

Answer 1

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

• 创建指令
• 使用renderer2添加/删除参考Using an Angular Directive to Add Class to Host Element
的类
• 请参阅下面的代码（自定义指令的内部），原谅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);
    }