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

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

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

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

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

2 99
angularjs angular2-template

2 ответа:

@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(); 
  }
}

пример Plunker

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

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

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

180

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

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

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

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

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