Angular2：由路由器动态插入的样式组件

Question

搜索了有关此问题的答案，并看到人们在为此苦苦挣扎，但没有直接答案，尤其是有关Angular 2.x版本的问题。

假设您有带有以下代码的app.component.html ：

<div>
  <router-outlet></router-outlet>
</div>

路由器动态插入您的自定义组件，例如my-component并（奇怪的是）将该组件作为router-outlet元素的同级放置，如下所示：

<div>
  <router-outlet></router-outlet>
  <my-component></my-component>
</div>

显然，路由器可以在其中放置另一个组件，因此在app.component.css文件中创建样式时，您不能依赖于名称为my-component 。

所以...你怎么做到的？

为什么这很重要？ 为什么不在my-component CSS内的:host上设置样式呢？ 好吧，因为不是所有样式都属于那里。 例如，如果app.component决定它是一个flex容器（即display: flex; ），则意味着my-component元素应样式化为flex项（即flex: 1 0 0; ）。 将flex项目样式放在my-component内部似乎是一种不好的做法，因为您将其与其父组件的样式耦合在一起。

如果知道答案，请拨入。

谢谢！

Answer 1

我没有尝试过，但我想相邻的兄弟选择器应该允许您这样做

:host div + * {
  display: flex;
}

Answer 2

关键是/ deep /关键字：

样式将适用于任何元素，后跟路由器出口。

或专门针对已知的组件应用不同的样式。

:host /deep/ router-outlet + my-component {
    display: block;
    border: 10px solid black;
}

:host /deep/ router-outlet + my-component2 {
    display: block;
    border: 10px solid red;
}