DOM属性_ngcontent- \*与_nghost- \*引起的Angular2样式问题

css CSS

古一

2020-03-24

我在scss和cli中遇到问题：angular _nghost-fyw-1在运行时将属性添加到apps标记（组件）。同时，它向我的CSS添加了一个属性选择器，_ngcontent-fyw-1这当然是行不通的。

您是否知道如何更改/避免这种行为？

PS：它也适用于常规CSS。

我的组件.scss文件如下所示：

my-comp {
  h1 {
    background-color: red;
  }
}

第3186篇《DOM属性_ngcontent- \*与_nghost- \*引起的Angular2样式问题》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
番长米亚 2020.03.24

:: ng-deep对我有用，添加到app.component.scss中：

:host ::ng-deep .mat-card {
    background: #000 !important;
    color: #fff;
}

该文档（https://angular.io/guide/component-styles）表示：

The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools.

Use it, with precaution...

老丝Gil樱 2020.03.24

更新

这是::ng-deep因为一段时间。
另请参见以下注释。

原版的

您没有提供太多细节，您无法在其中添加样式以及使用选择器定位哪些元素。

如果您希望样式跨越元素边界，则“官方”方式是使用>>>like

:host >>> h1 {
  background-color: red;
}
  • :host 定位到当前元素。
  • >>>（或/deep/）使Angular忽略_nghost-xxx用于组件样式封装仿真的属性。

另请参见D3.js组件中的样式未在angular 2中显示

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android