Angular 2中如何将子组件样式应用到父组件？

Question

我正在使用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;
}

这是否被认为是可以接受的，它还覆盖了父级从bootstrap获取的nav li a的值？也许我真的不理解影子DOM...

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

(但您必须在计算机上启动它，因为我不确定如何使"@import '/styles/UIComponent.css';"在plunker中工作，这样它会将css文件导入头部并使其全局化。如果您将该行更改为"@import '../styles/UIComponent.css';"（添加两个点），它将不会导入整个css，并且仿真器将根据需要进行翻译。)

编辑： 这是当前Angular2 beta版中的错误：https://github.com/angular/angular/issues/6449

- Silencer

---

你使用默认的 ViewEncapsulation (Emulated)，还是 None 或者 Native？ - Günter Zöchbauer

@Silencer CSS样式将根据HTML结构应用。请添加具有相同类名的父级和子级的HTML。 - Venugopal

@GünterZöchbauer 默认的那个，仿真的，我没有修改它。 - Silencer

为了避免子样式应用于父元素，你需要使用选择器，例如.parent-class-name [更具体].nav li a {。 - Venugopal

@Venugopal，所以您的意思是子样式会影响父级样式，这是很正常的？这实际上就是问题所在。同时，定义在父级中的样式不会影响子元素，有点奇怪... - Silencer

Answer 1

这应该可以满足你的需求。

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

这样做可以将样式的作用范围限制为子组件。
当使用ViewEncapsulation.None时，这种方法当然不起作用，因为它涉及到样式封装，而None正是禁用了这一点。

- Günter Zöchbauer

---

我需要看到更多你的HTML和CSS才能判断。请在浏览器的开发者工具中检查样式和DOM。选择器被Polyfills重写以实现样式封装。我无法通过我的简单示例复制您的问题。:host 限制在当前元素的影子DOM中。这个选择器很容易被重写。也许你遇到了一个边缘情况，这种方法不起作用。这可能是一个错误。 - Günter Zöchbauer

我认为我找到了这个 bug：在另一个子 css 文件 customer.component.css 中，我导入了另一个 css 文件：“@import '/styles/UIComponents.css';”。我认为这是一个愚蠢的行为，因为它似乎搞砸了仿真，并将 UIComponent.css 插入文档中，影响了所有元素。 - Silencer

这是否意味着Angular2中存在一个错误，父组件甚至不从<style>继承样式，而是直接从文件“UIComponents.css”中继承？抱歉问了这么多问题，你可以看出我不是这个领域的专家 :) - Silencer

我在Dart本地重建了示例，但无法复现。（我不使用TS，甚至不知道如何使用） - Günter Zöchbauer

我无法从CSS中访问Plunker的根路径...这是CSS文件中的CSS导入，而不是来自Angular的导入指令。谢谢你的帮助，你帮助我更好地理解了所有这些东西。也许我会在Angular问题页面上提问，我看到你也在那里活跃。不管怎样，据我所了解，在CSS中应该只使用相对路径，而不是像我一样使用根路径 :) - Silencer