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

我开始使用Angular 2，并使用来自最前面的管理模板进行样式设置。我希望我的组件采用index.html上定义的样式，它应该是全局的。问题是组件html文件中的元素找不到这些样式，我认为这是因为父子关系被破坏了。下面是一个例子：

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

在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>
...

。。。


...

我的

组件的.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都是相同的，但样式是不正确的。使用inspector，我可以看到组件的html没有使用与第二个元素相同的样式：

部件名称：

第二个元素的标题：

---

我尝试在我的组件上定义

封装：ViewEncapsulation.None

，但它没有任何作用。有没有办法解决这个问题？谢谢

我使用样式元数据添加给定组件所需的所有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文件

仅供参考，另一种全局公开样式的方法是在外部css文件中的样式开头添加

：host>>

。例如：

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

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

---

还有一件事要看的是不同类型的视图封装：模拟（默认）、本机和无

只需将视图填充设置为“无”：

---

我设法绕过这个限制的方法是改变组件指令的调用方式。通常，您会这样定义选择器：

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

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

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

并使用

调用它。相反，我定义了如下选择器：

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

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

<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

、

li

或任何DOM元素中的指令

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

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

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

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

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

... 应用于“.父类.子类”的样式

对于组件，我得到了如下结果：

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

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

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

... CSS不再能找到“.PrimeCopy.Car类”，因为中间有边栏菜单元素！

在解决方案中，您将得到以下结果：

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

... CSS仍然可以找到“.parent class.child class”，一切都很好！

---

希望这能帮助一些人。谢谢你的回答

一个艰难的选择是手动放置

！重要信息

用于这些属性。您可以共享呈现您期望的样式的css代码吗？看起来侧边栏组件上的某些父关系被更改了css随模板提供，因此编辑并不是一个真正的选项，因为它包含大量代码，而且非常容易破坏。