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

190

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

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

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

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

angular angular2-template

— lascarayf
источник

296

@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установлен на элементе хоста.

— Гюнтер Цохбауэр
источник

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

— Джон

Сделал здесь развилку, которая показывает фактическую :hostчасть работы. Где я могу узнать больше о параметре хоста в декораторе @Component () (синтаксис для меня неочевиден, а документация @Component мало что объясняет ) или узнать больше о предпочитаемом HostBinding (он указан только как Интерфейс на Сайт Angular2?)

— Красный горох

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

— Гюнтер Цохбауэр

1

использовать привязку с другим именем для привязки хоста, которая возвращает инвертированное значение@HostBinding('class.xxx') get xxxclass(){ return !this.someField;}

— Günter Zöchbauer

1

@YochaiAkoka не уверен, что вы имеете в виду. Я не знаю об этом правиле. Меньше, как правило, больше, поэтому, если вы можете избежать добавления дополнительных элементов, вам следует избегать этого.

— Гюнтер Цохбауэр,

184

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

Если вы ищете быстрый и понятный способ добавить один или несколько статических классов к элементу 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>

— JoshuaDavid
источник

1

Люблю это для простоты. Однако в моем случае элемент хоста инкапсулирован с другим атрибутом, давайте назовем его, ngcontent_hostчем любой из атрибутов элементов в моем шаблоне , let's call those ngcontent_template , so if I put a style in the styleUrls` моего компонента, они не будут влиять на элемент хоста, потому что они не будут влиять ngcontent_host, они может влиять только на элементы шаблона; они могут только влиять ngcontent_template. Я ошибаюсь? Есть предложения по этому поводу? Я думаю, что я всегда мог повернутьViewEncapsulation.None

— Красный горох

11

Другой способ - просто пропустить переменную @HostBinding('class.someClass') true;. Вы даже можете сделать это из любого класса, который расширяет ваш компонент.

— adamdport

3

Чтобы добавить несколько классов, вы можете сделать host: {'[class]': '"class1 class2"'}

— jbojcic

4

Если вы используете {}вариант host:, вы можете установить use-host-property-decoratorзначение falsein tslint.json. В противном случае вы получите предупреждения IDE. @adamdport Этот метод больше не работает. Используя Angular 5.2.2 в нашем приложении.

— Рууд Воост

1

Это только я, или старый способ кажется лучше, чем новый? Я уверен, что у них были веские причины для миграции, но,

— раздавить

13

Вы можете просто добавить @HostBinding('class') class = 'someClass';в свой класс @Component .

Пример:

@Component({
   selector: 'body',
   template: 'app-element'       
})
export class App implements OnInit {

  @HostBinding('class') class = 'someClass';

  constructor() {}      

  ngOnInit() {}
}

— Майк Д3ВиД Тайсон
источник

1

Имя класса директива может также использоваться и лучше избегать использования в classкачестве имени переменной (так как вы можете ссылаться на него и изменить его позже). Пример: @HostBinding('className') myTheme = 'theme-dark';.

— CPHPython

3

Если вы хотите добавить динамический класс к вашему хост-элементу, вы можете объединить его HostBindingс геттером как

@HostBinding('class') get class() {
    return aComponentVariable
}

Демонстрация Stackblitz по адресу https://stackblitz.com/edit/angular-dynamic-hostbinding

— Saksham
источник

0

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

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

@Input() componentClass: string = '';

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

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

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

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

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

— zippycoder
источник

2

Немного некро, но: это не добавляет класс CSS к элементу хоста - который является элементом для <root>тега, а не чем-либо, что вы добавляете в шаблон элемента.

— миллимус