如何使用 angular 2 在子页面中使用父 styleUrl？答案

【问题标题】：How to use parent styleUrl in child pages using angular 2?如何使用 angular 2 在子页面中使用父 styleUrl？
【发布时间】：2017-08-05 19:16:16
【问题描述】：

有没有办法在子页面中使用父附加的 CSS 文件

在我的页面布局中，我有：

@Component({
    styleUrls: [
        "../assets/css/bootstrap.min.css",
        "../assets/css/font-awesome.min.css",
        "../assets/css/theme.min.css"],
    templateUrl: "_layout.html"
})

在_layout.html中

<router-outlet>
</router-outlet>

调用子 URL 后，子页面正在渲染，但父 CSS 未应用。在chrome中检查开发模式后，我发现父页面

ul[_ngcontent-yny-1], li[_ngcontent-yny-1], span[_ngcontent-yny-1], div[_ngcontent-yny-1], button[_ngcontent-yny-1], input[_ngcontent-yny-1], select[_ngcontent-yny-1], span[_ngcontent-yny-1], label[_ngcontent-yny-1]

子页面

ul[_ngcontent-yny-2]

如所附屏幕截图中突出显示的那样

应用和布局页面的路由配置如下

export const appRoutes: Routes = [
    {
        path: "", component: PageLayoutComponent
    },
    {
        path: "", component: PageLayoutComponent, children: PageRoutes
    }
]

export const PageRoutes: Routes = [
    {
        path: "", component: LandingComponent
    },
    {
        path: "landing", component: LandingComponent
    }
]

【问题讨论】：

如果您想在整个应用程序中使用这些样式，您应该考虑将它们插入到 angular-cli.json 文件中的样式数组中，而不是组件样式Url，另一个选项是设置封装到 ViewEncapsulation.None。
查看这篇文章，也许对你有帮助：stackoverflow.com/a/36528769/1791913
谢谢@Emerson，但我有三个不同的布局，对于每个布局我都有不同的 StyleUrls。还尝试了 ViewEncapsulation.None 子 TS 文件中的相同但它不起作用
您是否正在寻找类似 @987654323@ 的内容。这里的组件有一个 prent child 关系，我觉得这就是你想要的
不@Rahul，我不想修改。我为三个差异布局设置了三个差异 CSS 文件，我想使用这些文件布局特定

标签： angular angular2-routing angular2-template typescript2.0

【解决方案1】：

所以，您希望能够使用全局 css 样式。在这种情况下，删除角度视图封装，在所涉及的组件中添加下一行：

@Component({
// ...
encapsulation: ViewEncapsulation.None,
styles: [
  // ...
]
})

【讨论】：