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

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

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

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

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

источник

2016-01-06 lascarayf

Возможный дубликат [Как изменить класс тела с помощью класса машинописного текста (угловой2)] (http://stackoverflow.com/questions/34636661/how-do-i-change-the-body-class -via-a-typescript-class-angular2) –

Да, это решение также работает, но тоже ужасно :). Другая проблема заключается в том, что CSS должен быть определен вне области компонентов !!! (как у ElementRef). – lascarayf

140

@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 example

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

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

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

источник

2016-01-06 21:40:30

Мне нужно было сделать 'someField = true' в' ngOnInit() '-методе вместо' ngAfterViewInit() '. Я не мог заставить его работать иначе. – John

[Сделано вилкой здесь] (https://plnkr.co/edit/UsHyi78eza01N25ulxzA?p=preview), в котором показана действительная часть ': host'. Где я могу узнать больше о параметре хоста в @Component() decorator (синтаксис для меня не очевиден, а документация [@Component не очень сильно объясняет] (https://angular.io/docs/ts/latest /api/core/index/Component-decorator.html)) или узнать больше о вашем предпочтительном HostBinding (это только [указано как интерфейс] (https://angular.io/docs/ts/latest/api/core/index /HostBinding-interface.html) на сайте Angular2?) –

Я не знаю лучших документов, но это просто отличный способ сделать то, что вы можете сделать с помощью '@Input()' '@Output()' '@HostBinding () '' @HostListener() '' @ViewChild (ren)() '' @ContentChild (ren)() ' –

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

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

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

И если вы используете класс по въездному тегу, Угловой будет объединять классы, т.е.

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

источник

2017-01-08 01:42:12 JoshuaDavid

Люблю это для простоты. Однако в моем случае элемент хоста инкапсулирован с другим атрибутом, назовем его 'ngcontent_host', чем любой из атрибутов элементов в моем шаблоне', назовем эти' ngcontent_template', поэтому, если поместить стиль в 'styleUrls', моего компонента, они не будут влиять на элемент хоста, потому что они не будут влиять на 'ngcontent_host', они могут влиять только на элементы шаблона; они могут влиять только на 'ngcontent_template'. Я ошибаюсь? Любые предложения по этому поводу? Думаю, я всегда мог бы поворачивать 'ViewEncapsulation.None' –

Упс, может быть, это так, как говорит Гюнтер: специальный селектор': host'. [Подробнее см. Здесь] (https://angular.io/docs/ts/latest/guide/component-styles.html#-host) –

Очень простое и эффективное решение для добавления класса к элементу хоста компонента. Я использую это в своем приложении. Спасибо за тонну за обмен! – Devner

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

ответ

Смежные вопросы