Question

我开始使用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没有使用与第二个元素相同的样式：

组件的检查标题：

第二个元素的检查标题：

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

Answer 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;
}

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

另一个需要注意的是不同类型的视图封装：模拟（默认），本机和无。 https://angular.io/docs/ts/latest/guide/component-styles.html#view-encapsulation

Answer 2

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

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

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

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

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

3 个答案: