Angular2：路由器

Question

搜索了这个问题的答案，看到人们在努力解决这个问题，但没有直接的答案，特别是关于已发布的2.x版本的Angular。

假设您app.component.html包含以下代码：

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

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

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

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

那么......你是怎么做到的？

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

如果您知道答案，请致谢。

谢谢！

Answer 1

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

:host div + * {
  display: flex;
}

Answer 2

关键是/deep/关键字：

该样式将适用于router-outlet后面的任何元素。

或者使其具体应用于已知组件的不同风格。

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

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