为嵌套的角度2组件指定样式类

Question

在my.component.html里面说

<nested-component [class]="nestedClass"></nested-component>

然后当我想使用我的组件时，我想指定它们的样式类：

<my-component class="my-component-style" nestedClass="nested-component-style"></my-component>

上面没有用（即嵌套组件没有被赋予样式类.nested-component-style）。你会如何解决上面的代码？其他的解决方法是受欢迎的。

Answer 1

使用

/deep/ .nested-component-style 

或

>>> .nested-component-style 

在父组件中将其应用于其子项。

或者为了更安全，在应用程序级别的styles.css中放置.nested-component-style以使其全局定义。

请注意缺少浏览器支持/ deep /和＆gt;＆gt;＆gt;选择器。

更多信息here。

Answer 2

这是对的。只需在您的子组件中添加一个@Input变量，只需链接

即可

  @Input() nestedClass = '';

Answer 3

my.component.html

<nested-component class="nestedClass"></nested-component>

在里面 my.component.ts

@Input() nestedClass: string;

和nexted.component.html

<my-component class="my-component-style" [nestedClass]="'nested-component-style'"></my-component>