是否可以在 Angular 2 中添加动态 class 到主机？

Question

我知道在 Angular2 中，我可以通过这样做将 class 'red' 添加到组件的选择器元素中：

@Component({
    selector: 'selector-el',
    host: {
        '[class.red]': 'true'
    },
    ...
})

我想知道是否有办法将 dynamic class 添加到主机，类似于您对 NgClass 所做的（我知道 NgClass 不是实际上支持，我正在寻找可能的解决方案):

@Component({
    selector: 'selector-el',
    host: {
        '[NgClass]': 'colorClass'
    },
    ...
})
...
constructor(){
    this.colorClass = 'red';
}

Answer 1

你可以使用类似的东西：

@Directive({
  (...)
  host: {
    '[class.className]' : 'className', 
    '[class]' : 'classNames' 
  }
}
export class MyDirective {
  className: boolean;
  classNames: string;

  constructor() {
    this.className = true;
    this.classNames = 'class1 class2 class3';
  }
}

Answer 2

import {Component, HostBinding} from 'angular2/core';

@Component({
  (...)
}

export class MyComponent {
  @HostBinding('class') colorClass = 'red';
}

Answer 3

Renderer的setElementClass可用于添加或删除任意的class。例如 md-[color] 其中 color 由输入

提供

<some-cmp [color]="red">

@Component({
// @Directive({
    selector: 'some-cmp',
    template: '...'
})
export class SomeComp {
    _color: string;

    @Input()
    set color(color: string) {
        this._color = color;
        this.renderer.setElementClass(this.elementRef.nativeElement, 'md-' + this._color, true);
    }

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

    constructor(private elementRef: ElementRef, private renderer: Renderer){}
}

另见

Answer 4

您可以执行以下操作：

import {Component} from "@angular/core"

@Component({
    selector: "[textbox]",
    host: {"class": "first-class secondClass ThirdClass AnYClaSs"},
    template: ...                                            
})
export class MyComponent { }

在我看来，这比引入变量更直接。
应该在 Angular2 rc5、rc6、rc7、final 中工作。可能在早期版本中有效，但没有尝试。

Answer 5

如果您想从外部更改它，您可以结合使用 @HostBinding 和 @Input():

@Component({
    selector: 'my-component',
    template: ``
})
export class MyComponent {
    @HostBinding('class.your-class') @Input() isSelected: boolean;
}

Answer 6

我最近制作了一个名为 <ng-host> 的指令（受 this issue 启发），它将每个（非结构性）更改重定向到组件宿主元素，用法：

@Component({
  template: `
    <ng-host [ngClass]="{foo: true, bar: false}"></ng-host>
    <p>Hello World!</p>
  `
})
class AppComponent { }

可以找到在线演示 here。

支持的用法已定义 here。

~~我通过 指令即服务 模式实现了这一点，即手动提供 NgClass 并像 (online demo )~~

~~由于DI机制，NgClass会得到当前宿主元素的ElementRef，Self()修饰符有助于保证。所以不需要通过构造函数创建实例，因此仍然在 public API 用法下。~~

~~结合class继承会更简洁，例子见here.~~

Answer 7

我是这样做的。也许有人会派上用场

@HostBinding('class') get hostClasses() {
    return `some-class ${this.dynamicOne} ${this.disabled ? 'disabled' : ''}`;
}

或Simon_Weaver的建议：（the return value can also be an array，谢谢！）

@HostBinding('class') get hostClasses() {
  const classList = ['some-class', this.dynamicOne];
  if( this.disabled) { classList.push('disabled'); }
  return classList;
}

Answer 8

这对我有用：

import { Component, Attribute, HostBinding } from "@angular/core";

@Component({
    selector: "selector-el",
    template: ...                                            
})
export class MyComponent {
    @HostBinding('class') get classAttribute(): string {
        let defaultClasses = 'selector-el-class';
        return defaultClasses + ' ' + this.classNames;
    }

    constructor(
        @Attribute('class') public classNames: string
    ) { }
}

是否可以在 Angular 2 中添加动态 class 到主机？

Is it possible to add a dynamic class to host in Angular 2?

angular2-template

angular