Angular — @HostBinding() — может читать классы, добавленные из HTML
Мне нужно динамически добавить класс из машинописного текста в компонент и сохранить классы, которые программист добавил из шаблона HTML. Но если я использую классы @HostBinding('class'): string => все добавленные извне классы будут игнорироваться.
<my-component class"thisWillBeIgnored"></my-component>
Нужно ли мне сначала читать классы извне и добавлять к ним свой класс из машинописного текста? КАК? :D
Спасибо
Ответы 2
Я думаю, что решение для вас — использовать директиву ngClass для применения классов к вашему компоненту. Затем внутри вашего компонента вы должны использовать метод addClass средства визуализации, чтобы добавить любые новые классы.
<my-component [ngClass] = "'my-custom-class'"></my-component>
В MyComponent:
constructor(private renderer: Renderer2, private eltRef: ElementRef) {
}
ngOnInit () {
this.renderer.addClass(this.eltRef.nativeElement, 'my-other-custom-class');
}
Конечно, вам не нужно добавлять классы специально в метод ngOnInit, это просто пример.
возможно, это не лучшее решение, чем @Fredriks_Macrobond, но проще всего было:
constructor(private el: ElementRef) {
}
@Input()
set size(value: number) {
if (condition) {
this.el.nativeElement.classList.add(this.desiredClass);
}
}
используйте
@HostBinding('class.<class-name>')вместо@HostBinding('class')