如何將類名稱添加到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來為“ self”添加樣式

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

Answer 2

您在樣式表中聲明CSS類.. search-form.component.css

如果要在樣式表中定位組件，則可以...

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

這將使用標簽搜索表單來定位元素。

由於Angular2基於組件，因此它僅針對組件內部的元素。 我不確定它是否會針對實際元素本身，但我認為會。

Answer 3

我可以舉一個例子。

首先創建一個樣式表。 喜歡

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

然后在您的HTML中包括您的樣式表以及angular.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必須在您創建的ng-app的div內。

希望這可以幫助。 祝一切順利。