在Angular 2中应用于父组件的子样式?

时间:2016-01-12 09:55:18

标签: css angular

我使用Bootstrap css作为全局样式,然后根据需要在每个组件中修改它,在index.htm我有:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

然后在孩子中添加样式

.nav li a {
  padding: 5px 10px;
}

也覆盖了父进程从导航程序中获取的值,这是否正常?也许我不太了解Shadow DOM ......

Plunker http://plnkr.co/edit/O2r3zKlYj7SH7FWHvWnT?p=preview

(但你必须在你的电脑上启动它,因为我不确定如何制作&#34; @import&#39; /styles/UIComponent.css' ;;&#34; in customer.component.css在plunker中工作,这样它在头文件中导入css文件并使其成为全局。如果你将行更改为&#34; @import&#39; ../ styles / UIComponent.css&#39; ;&#34;(添加了两个点)它不会导入整个css,模拟器会根据需要进行翻译。)

修改: 这是当前Angular2测试版中的一个错误:https://github.com/angular/angular/issues/6449

1 个答案:

答案 0 :(得分:1)

这应该做你想要的事情

:host .nav li a {
  padding: 5px 10px;
}

这样您就可以将样式的范围限制在子组件中 使用ViewEncapsulation.None时,这当然不起作用,因为这是关于样式封装的,而None正是禁用它。