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

时间:2016-03-14 19:21:02

标签: angular angular2-template

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

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

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

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

7 个答案:

答案 0 :(得分:18)

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

答案 1 :(得分:13)

你可以使用类似的东西:

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

答案 2 :(得分:10)

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

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

答案 3 :(得分:6)

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

@Component({
  (...)
}

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

答案 4 :(得分: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将获得当前主机元素的ElementRefSelf()修饰符有助于保证它。因此,不需要通过构造函数创建实例,因此仍然使用公共API。

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

答案 5 :(得分:5)

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

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

答案 6 :(得分:-1)

您可以执行以下操作:

import {Component} from "@angular/core"

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

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