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

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

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

Мне интересно, есть ли способ добавить динамический класс к хосту, аналогичный тому, что вы бы сделали с NgClass (я знаю, что NgClass на самом деле не поддерживается, я ищу возможные решения):

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

Ответы

Ответ 1

Вы можете использовать что-то вроде этого:

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

Ответ 2

Renderer setElementClass может использоваться для добавления или удаления произвольного класса. Например, 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){}
}

См. Также альтернативу nativeElement.classList.add()

Ответ 3

Если вы хотите изменить его извне, вы можете комбинировать @HostBinding и @Input():

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

Ответ 4

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

@Component({
  (...)
}

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

Ответ 5

Недавно я сделал директиву под названием <ng-host> (вдохновленный этой проблемой), она перенаправляет каждое (неструктурное) изменение на элемент хоста компонента, использование:

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

Онлайн-демо можно найти здесь.

Определенные здесь способы использования.

Я достиг этого директивы как шаблон обслуживания, а именно вручную предоставляя NgClass и использую его как (онлайн-демонстрацию)

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

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

Ответ 6

Вы можете сделать следующее:

import {Component} from "@angular/core"

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

Который является более простым, чем введение переменной.
Должен работать в Angular2 rc5, rc6, rc7, final. Может работать в более ранних версиях, но не пробовал.