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中。

希望这会有所帮助。一切顺利。

如何将类名添加到Angular2指令

3 个答案: