如何将类名添加到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应用程序的div内。

希望这能有所帮助。万事如意。