如何在使用角2的子页面中使用父styleUrl？

有没有办法使用父连接CSS文件使用子页如何在使用角2的子页面中使用父styleUrl？

在我的页面布局，我有：

@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>

后调用子网址，子页面正在呈现，但父级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]

在连接

路由配置的应用程序和layoutpage截图突出低于

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

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

来源

2017-08-05 Nik Varma

如果你想使用这些风格为您的整个应用程序，你应该考虑将它们插入到在角CLI样式阵列。 json文件而不是组件stylesUrl，另一个选项是将封装设置为ViewEncapsulation.None。 –

检查这个帖子，也许这可以帮助你：https://stackoverflow.com/a/36528769/1791913 – Faisal

谢谢@爱默生，但我有三个差异布局和每个布局我有差异StyleUrls。也试过ViewEncapsulation.None相同的子TS文件，但它不工作 –

所以，你要能够使用全局CSS样式。在这种情况下，删除斜视封装，加上下一行中所涉及的部件：

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

来源

2017-08-06 21:52:21 sancelot

如何在使用角2的子页面中使用父styleUrl？

回答

相关问题