Question

我知道在Angular2中我可以通过这样做将一个类'red'添加到组件的selector元素中：

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

我想知道是否有办法将动态类添加到主机，类似于你对NgClass的处理（我知道实际上不支持NgClass，我正在寻找可能的解）：

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

Answer 1

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

提供

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

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

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

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

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

另见looking for nativeElement.classList.add() alternative

Answer 2

你可以使用类似的东西：

@Directive({
  (...)
  host: {
    '[class.className]' : 'className', 
    '[class]' : 'classNames' 
  }
}
export class MyDirective {
  constructor() {
    this.className = true;
    this.classNames = 'class1 class2 class3';
  }
}

Answer 3

如果您想从外面更改它，可以合并@HostBinding和@Input()：

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

Answer 4

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

@Component({
  (...)
}

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

Answer 5

我最近制定了一个名为<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()修饰符有助于保证它。因此，不需要通过构造函数创建实例，因此仍然使用公共API。~~

~~与类继承结合使用时可以更简洁，可以在here找到一个示例。~~

Answer 6

我以这种方式做到了。也许有人会派上用场

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

Answer 7

您可以执行以下操作：

import {Component} from "@angular/core"

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

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

是否可以在Angular 2中添加动态类来托管？

7 个答案: