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

为此搜索了一个答案，并且看到人们正在为此而苦苦挣扎，但没有直接答案，尤其是关于已发布的2.x版本的Angular。Angular2：由路由器动态插入的样式组件

假设你有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决定它是一个弹性容器（即，display: flex;），那将意味着该my-component元素应该被设计为弹性项目（即，flex: 1 0 0;）。将柔性项目样式放置在my-component的内部似乎是一种不好的做法，因为您将它与其父组件的样式相结合。

编钟如果你知道答案。

谢谢！

来源

2016-12-01 user1902183

我试过类似的东西没有运气，最接近的解决方案是让父母将必要的数据推送到服务并让孩子观察它来更新它的主机数据。显然不理想，但据我所知，无法通过路由器插座将数据从父级传递到子组件。 –

我还没有试过，但我想相邻兄弟选择应该允许你这样做

:host div + * { 
    display: flex; 
}

来源

2016-12-01 05:47:53

将这个CSS放到app.component中会有：host指向应用组件的主机，而不是'my-component'。把它放在'my-component'里面是没有意义的。不确定你在这里的意思。 – user1902183

的关键是/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; 
}

来源

2017-04-21 08:40:46 Val

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

回答

相关问题