Question

我试图以角度2创建按钮组件。在主机上，我必须设置一个动态生成的css类名。（取决于绑定的财产）

＆＃39; [ngClass]＆＃39;在主机上不起作用。

我已经读过使用elementRef.nativeElement.classList.add（value）也不是最好的方法，因为webworkers（或左右）不支持classList

在主机上动态生成课程的最佳选择是什么？

@Component({
    selector: '[md-button]',
})
export class MdButton {
    color_: string;

    @Input
    set color() {
        this.color_ = value;
        if (this.elementRef !== undefined) {
            this.elementRef.nativeElement.classList.add('md-' + this.color_);
        }   
    }

    get color(): string {
        return this.color_;
    }

    constructor(public elementRef: ElementRef){}
}

Answer 1

@Component({
    selector: '[md-button]' //,
    // host: { '[class]': 'classList()' }
})
export class MdButton {
    color_: string;

    // classList() {
    //  return 'md-' + this.color_;
    // }

    @Input
    set color() {
        this.color_ = value;
        // if (this.elementRef !== undefined) {
        //    this.elementRef.nativeElement.classList.add('md-' + this.color_);
        // }   

        this.renderer.setElementClass(this.elementRef, 'md-' + this.color_, true);
    }

    get color(): string {
        return this.color_;
    }

    constructor(public elementRef: ElementRef, private renderer: Renderer2){}
}

Answer 2

感谢Günter我找到了解决方案。这是他的代码，但是为将来可以使用它的人清理过。

Extensions = [zip,rar,7z,dmg]
foreach(extensions as ext)
RewriteRule ^up/(.*).ext$ upload/file.php?id=$1.ext [NC]

nativeElement.classList.add（）替代方案

2 个答案: