Как добавить имя класса в директиву Angular2

Question

Я хочу добавить название класса в директиву NG2, чтобы применить к нему правила CSS. Учитывая следующий компонент:

@Component({ 
    moduleId: module.id, 
    selector: 'search-form', 
    templateUrl: 'search-form.component.html', 
    styleUrls: [ 'search-form.component.css'] 
}) 

Я попытался это:

search-form { 
    width:100%; 
    display:block; 
} 

Но это не сработало.

Как добавить класс в search-form?

Answer 1

@Component({ // or @Directive({ 
    // use `host:` or `@HostBinding()` (not both) 
    // host: {'[class.someclass]': 'true'} 
}) 
class SearchFormComponent { 
    @HostBinding('class.someclass') 
    someClass = true; 
} 

Возможно, вы имеете в виду добавление стилей к «я», добавив этот CSS к search-form.component.css

:host { 
    width:100%; 
    display:block; 
} 

Answer 2

Вы объявляете классы CSS в таблице стилей .. Поиск-form.component.css

Если вы хотите, чтобы целевой компонент в таблице стилей, то вы могли бы сделать ...

search-form { 
    width:100%; 
    display:block; 
} 

Это будет целевых элементов с формой поиска тегов.

Поскольку Angular2 является компонентом, он предназначен только для элементов внутри компонента. Я не уверен, будет ли он нацелен на фактический элемент, но я думаю, что так и будет.

Answer 3

Я могу показать пример этого.

Сначала создайте таблицу стилей. например

<style> 
.red 
{ 
color:red; 
} 
.blue 
{ 
color:blue; 
} 
</style> 

Затем в ваш HTML-код укажите свою таблицу стилей вместе с угловым.min.js и создайте раскрывающееся меню, как показано ниже.

<select ng-model="a"> 
<option value="red">red</option> 
<option value="blue">blue</option> 

</select> 

Затем создайте тег H1, как показано ниже.

<h1 ng-class="a">Header color</h1> 

Примечание. HTML должен находиться внутри div ng-приложения, которое вы создаете.

Надеюсь, это поможет. Всего наилучшего.