在 Angular 2 中使用全局 CSS 设置子元素的样式答案

【问题标题】：Styling child elements using global CSS in Angular 2在 Angular 2 中使用全局 CSS 设置子元素的样式
【发布时间】：2017-06-21 06:07:11
【问题描述】：

我开始使用 Angular 2，并且正在使用 Themeforest 的管理模板进行样式设置。我希望我的组件采用 index.html 上定义的样式，它应该是全局的。问题是组件 html 文件中的元素没有找到这些样式，我认为这是因为父子关系以某种方式被破坏了。这是一个例子：

在 index.html 文件中，我有以下内容：

...
<!-- This is my Component -->
<sidebar-menu></sidebar-menu>

<!-- This is coded directly on the index.html -->
<li class="m-t-30">
    <a href="#" class="detailed">
        <span class="title">Page 1</span>
        <span class="details">234 notifications</span>
    </a>
    <span class="icon-thumbnail "><i class="pg-mail"></i></span>
</li>
...

我的<sidebar-menu> 组件在它的 .html 文件中有这个：

<li class="m-t-30">
  <a href="#" class="detailed">
    <span class="title">Page 1</span>
    <span class="details">234 notifications</span>
  </a>
  <span class="icon-thumbnail "><i class="pg-mail"></i></span>
</li>

这与 index.html 文件中的内容完全相同。所以，我应该看到这两个项目以相同的方式显示。但这就是我所看到的：

很明显，样式被破坏了，尽管组件的 html 和元素的 html 是相同的。使用检查器，我可以看到组件的 html 没有使用与第二个元素相同的样式：

组件的检查标题：

第二个元素的检查标题：

我尝试在我的组件上定义encapsulation: ViewEncapsulation.None，但它没有做任何事情。关于如何解决这个问题的任何想法？谢谢！

【问题讨论】：

一个艰难的选择是为这些属性手动放置!important。
你能分享呈现你期望的样式的css代码吗？看起来侧边栏组件上的某些父关系已更改
css 是模板自带的，所以编辑不是一个选项，因为它有很多代码而且超级容易破解。

标签： html css angular

【解决方案1】：

我使用样式元数据添加给定组件所需的所有 css 文件。如果您有权访问管理模板 css，则可以使用组件的相对路径来引用它。一个例子：

@Component({
    selector: 'my-selector',
    template: require('./my-template.html'),
    styles: [
        require('./my-style.css'),
        require('../some-other-folder/some-other-style.css')
    ]
})

由于默认情况下模拟视图封装，因此其他样式不会以这种方式渗入您的组件，您必须明确声明要包含在此组件中的 css 文件。

仅供参考，另一种在全局范围内公开样式的方法是将 :host >>> 添加到外部 css 文件中样式的开头。示例：

:host >>> .no-margin {
    margin: 0;
}

（正如你所说，你不能更改管理模板，这个选项对你不起作用，但我把它放在这里给任何有兴趣的人）。使用这种方法，您不必将样式包含在您的样式数组中。

还有一点需要注意的是不同类型的视图封装：Emulated（默认）、Native 和 None。 https://angular.io/docs/ts/latest/guide/component-styles.html#view-encapsulation

【讨论】：

【解决方案2】：

只需将视图封装设置为“无”：

@Component({
    ....
    encapsulation: ViewEncapsulation.None
})

【讨论】：

【解决方案3】：

我设法解决此限制的方法是更改调用组件指令的方式。通常，您会像这样定义选择器：

@Component({
  moduleId: module.id,
  selector: 'sidebar-menu',
  ...
})

并使用<sidebar-menu></sidebar-menu> 调用它。相反，我这样定义选择器：

@Component({
  moduleId: module.id,
  selector: '[sidebar-menu]',
  ...
})

并将其作为 div、li 或任何 DOM 元素中的指令调用。

<ul class="menu-items" sidebar-menu></ul>

这样，我仍然可以使用我的 Themeforest 模板中的样式并使用组件。我认为它坏了，因为通常我会有这样的东西：

<div class="parent-class">
    <div class="child-class">
        ... styles applied to ".parent-class.child-class"
    </div>
</div>

有了组件，我得到了这样的东西：

<div class="parent-class">
    <sidebar-menu>
        <div class="child-class">
            ... CSS can't find ".parent-class.child-class" anymore, as it has a sidebar-menu element in the middle!
        </div>
    </sidebar-menu>
</div>

使用解决方法，您最终会得到以下结果：

<div class="parent-class">
    <div class="child-class" sidebar-menu>
        ... CSS can still find ".parent-class.child-class", all good!
    </div>
</div>

希望这会对某人有所帮助。感谢您的回答！

【讨论】：