如何将类名称添加到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内。

希望这可以帮助。 祝一切顺利。