Question

我想基于@Inputs到Component动态生成一系列类。

我希望这些类应用于Component选择的元素，而不是Component的任何子元素。

假设我有一个简单的Component：

@Component({
    selector:       'responsive-table-column',
    templateUrl:    `<div #responsiveTableCell >
                        <ng-content></ng-content>
                    </div>`
})
export class ResponsiveTableColumn {
    private A:string = "";
    private B:string = "";
    @Input()
    get a(){
        return this.A;
    }
    set a(val:any){
        this.A = val;
    }
    @Input()
    get b(){
        return this.B;
    }
    set b(val:any){
        this.B = val;
    }
    getClassName(){
        //Do something to create class names
        return "classes";
    }
}

我想将生成的类名应用于我的组件选择的<responsive-table-column>元素。

如何访问此元素？不支持替换，否则我会将其放在#responsiveTableCell。

基本上，我希望看到这一点：

<responsive-table-column class="{{getClassName()}}" >
    <div #responsiveTableCell >
        <ng-content></ng-content>
    </div>
</responsive-table-column>

Answer 1

我认为最好的方法是使用ElementRef.nativeElement.classList启用/禁用各种类：

constructor(private elRef:ElementRef) {}

ngOnChanges() {
  this.elRef.nativeElement.classList.add(this.a); 
}

Angular 2 Component：从组件范围设置所选元素的类

1 个答案: