Должен ли я добавить атрибуты класса в теги выбора угловых компонентов

Question

Я бы хотел добавить класс непосредственно к селектору в Angular 5. Примерно так:

<myapp-selector class="myclass"></myapp-selector>

Я уже некоторое время искал, и я нашел несколько решений, таких как host из @Component. Но я не могу найти однозначного ответа на конкретный вопрос.

Безопасно ли это и считается ли это плохой практикой?

Answer 1

Полагаю, это зависит от того, чего вы пытаетесь достичь.

Простое добавление класса к компоненту выполняется путем статического добавления его в тег, как вы уже упоминали.

Добавление класса условно может быть сделано несколькими способами, один из которых использует @HostBinding() или свойство host компонента

@Component({
  ...
})
class SomeComponent {

  @HostBinding('class.someClassName') shouldAddClass: boolean;

}

Или

@Component({
  host: {
    '[class.active]': 'somePropertyName'
  }
})
class SomeComponent {
  somePropertyName: boolean;
}

Теперь класс active будет добавлен, когда свойство имеет значение true, и удален, когда он false.

.

Другой альтернативой является использование директивы [ngClass], которая по сути делает то же самое, только что потребитель компонента решает, когда класс добавляется и удаляется:

<some-component [ngClass]="{ active: somePropertyThatsEitherTrueOrFalse }">

Answer 2

Наилучшим подходом было бы применение стиля / класса внутри вашего компонента как контейнера, но вы также можете добавить классы к компоненту.