Можно ли добавить динамический класс для размещения в Angular 2?

Question

Я знаю, что в Angular2 я могу добавить класс «красный» для элемента селектора компонента, делая это:

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

Я задаюсь вопросом, есть ли способ добавить динамический класс к хосту, подобно тому, что вы могли бы сделать с 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 { 
    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 s 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 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

Я достиг этого с помощью директивы как шаблон Service, а именно вручную предоставления NgClass и использовать его как (online demo):

const prefix = 'ant-btn' 

@Directive({ 
    selector: 'button[antBtn]', 
    providers: [ NgClass ], 
}) 
export class HelloComponent implements OnChanges { 
    @Input() color: string = 'default' 

    private hostClasses: { [name: string]: boolean } 

    constructor(@Self() private ngClass: NgClass) { } 

    ngOnChanges(changes: SimpleChanges): void { 
    this.hostClasses = { 
     [`${prefix}`]: true, 
     [`${prefix}-${this.color}`]: true, 
    } 

    this.updateHostClasses() 
    } 

    private updateHostClasses(): void { 
    this.ngClass.ngClass = this.hostClasses 
    this.ngClass.ngDoCheck() 
    } 
} 

Благодаря механизму DI, NgClass получит ElementRef текущего хост-элемента, модификатор Self() помогает его гарантировать. Таким образом, нет необходимости создавать экземпляр конструктором, тем самым все еще находясь в открытом доступе к API.

Это может быть более кратким в сочетании с наследованием класса, пример можно найти на here.