Как добавить "класс" в элемент хоста?

Я не знаю, как добавить к моему компоненту <component></component> динамический класс, но внутри шаблона html (component.html).

Единственное решение, которое я нашел, - это изменить элемент через собственный элемент ElementRef. Это решение кажется немного сложным для выполнения чего-то, что должно быть очень простым.

Другая проблема заключается в том, что CSS должен быть определен вне области внешнего компонента, разбивая инкапсуляцию компонентов.

Есть ли более простое решение? Что-то вроде <root [class]="..."> .... </ root> внутри шаблона.

Ответы

Ответ 1

@Component({
   selector: 'body',
   template: 'app-element',
   // prefer decorators (see below)
   // host:     {'[class.someClass]':'someField'}
})
export class App implements OnInit {
  constructor(private cdRef:ChangeDetectorRef) {}

  someField: boolean = false;
  // alternatively also the host parameter in the @Component()` decorator can be used
  @HostBinding('class.someClass') someField: boolean = false;

  ngOnInit() {
    this.someField = true; // set class `someClass` on `<body>`
    //this.cdRef.detectChanges(); 
  }
}

Пример плунжера

Таким образом, вам не нужно добавлять CSS вне компонента. CSS как

:host(.someClass) {
  background-color: red;
}

работает изнутри компонента, а селектор применяется только в том случае, если класс someClass установлен на элементе хоста.

Ответ 2

Ответ Гюнтера великолепен (вопрос требует атрибута динамического класса), но я подумал, что добавлю только для полноты...

Если вы ищете быстрый и понятный способ добавить один или несколько статических классов к элементу host вашего компонента (т.е. В целях стилизации темы), вы можете просто сделать:

@Component({
   selector: 'my-component',
   template: 'app-element',
   host: {'class': 'someClass1'}
})
export class App implements OnInit {
...
}

И если вы используете класс в теге entry, Angular объединит классы, т.е.

<my-component class="someClass2">
  I have both someClass1 & someClass2 applied to me
</my-component>

Ответ 3

Вот как я это сделал (Angular 7):

В компонент добавьте вход:

@Input() componentClass: string = '';

Затем в компонент HTML шаблона добавьте что-то вроде:

<div [ngClass]="componentClass">...</div>

И, наконец, в шаблоне HTML, где вы создаете экземпляр компонента:

<root componentClass="someclass someotherclass">...</root>

Отказ от ответственности: я довольно новичок в Angular, так что, возможно, мне просто повезло здесь!