css - 在 angular6 组件中使用动态 css

Question

我正在使用两个不同的组件 A:sea.component.ts 和 B:sun.component.ts 都在这些子组件中调用一个子组件，如果被 sea 或 sun 组件调用，我必须加载不同的 css。可以将 css url 作为输入传递给子组件:

 <sun_parent>
     <child [css]="sun_css"></child>
 </parent>

 <sea_parent>
     <child [css]="sun_css"></child>
 </sea_parent>

Answer 1

也许有办法，但这里有一个建议:你的两个组件调用同一个子组件，所以你可以通过在父 div 上使用 id 来利用它，如下所示:

这是一个例子:

https://stackblitz.com/edit/reuseable-component

<parent id="iAmSeaParent">
    <child></child>
</parent>

<parent id="iAmSunParent">
    <child></child>
</parent>

在你的 style.css 中

#iAmSeaParent childClassOrIdOrTag {
    background: yellow;
}

#iAmSunParent childClassOrIdOrTag {
    background: yellow;
}