修改另一个组件中组件模板的CSS

Question

我将组件A称为组件B中的子组件。组件A有一个div类，其中包含需要在组件B中修改的CSS。如何从中访问该div类成分B？

组件A的模板：

    <div class="something">
    .
    .

    </div>

组件B的模板：

<app-componentA></app-componentA>

Answer 1

您实际上不应该这样做，可以输入要应用于子组件的样式/类，但是，如果需要这样做，可以使用ngdeep（不建议使用）here < / p>

编辑

您可以从父组件传递输入（实际上只是一个JavaScript对象），并在子组件中动态分配该输入，如下所示：

子组件：

<div [ngStyle]="inputStyle">
</div>

及其TS：

@Input() inputStyle; //This is the input received from the parent component

然后在父组件中，通常可以将CSS作为JavaScript对象传递，如下所示：

<app-componentA [inputStyle]="{backgroundColor: 'red', 'height': '100px'}"></app-componentA>

此示例将样式设置为通过HTML传递的静态样式对象，当然，该样式可以与动态对象（通过父级的TS文件分配）一起使用，甚至可以使用相同的概念传递自定义类名称但在子组件中使用ngClass代替ngStyle