使用:: ng-deep在角度组件的样式中@import样式-Java 学习之路

使用Angular 5，带有scss的angular-cli .

我正在创建使用第三方组件（angular-tree-component）的角度组件 . 我需要为树导入样式 . 由于角度中的样式隔离（使用默认的模拟视图封装），如何实现它的唯一方法是使用 ::ng-deep ，如下所示：

:host ::ng-deep {
    @import '~angular-tree-component/dist/angular-tree-component.css';
}

但这不起作用 - 看起来_347668_在 :host ::ng-deep 中被忽略了 . 我通过直接在括号内复制css文件的内容来处理它，但它的次优，好像引用的包已升级，然后我将不得不手动用新样式替换内容 .

只有我能想到的其他解决方法是将视图封装更改为 None ，但它似乎更糟糕，因为它使样式全局化 .

还有更好的选择吗？

2 回答

试试这个：

/deep/ {
    @import '~angular-tree-component/dist/angular-tree-component.css';
}

回复于 2024-04-26T17:09:12+08:00

0
对我来说，在Angular CLI 6项目中，当不包括文件的后缀时，一切正常 . 就像实际文件是 simplemde.min.css 一样：
```
:host ::ng-deep {
    // For proper scoping, do not include the .css file suffix here
    @import '~simplemde/dist/simplemde.min';
}
```
所以，上面的工作无需 encapsulation: ViewEncapsulation.None . 它还使非范围内容（通常是在Angular之外的运行时创建的HTML，就像在我的情况下为the SimpleMDE Markdown editor生成的HTML）按预期进行样式设置 .

一些背景：

使用后缀， @import 实际上也被处理;每当我的组件被实例化时，一个范围的 <style> 元素被添加到 <head> ：

请注意，这会产生 _ngcontent 的作用域，这对 ::ng-deep 不起作用，使动态子内容无法正常运行 .

但是，如果没有后缀，则会得到：

上面，范围是使用 _nghost .

我想知道这是一个错误，还是记录在案的行为 . （也许Sass文件甚至有些不同？使用 @import for CSS is non-standard behaviour which will be removed in future versions of LibSass ...）

请注意，需要 :host . 只有 ::ng-deep ，文件后缀的结果是相同的 . 但是没有文件后缀，当不使用 :host 时，样式根本不是作用域的：

看着渲染的网页，我一直被愚弄认为这也有效（而且一个人自己的风格仍然很好，所以这是一个部分的成功） . 但是，当不使用 :host 时，第三方CSS实际上是在没有任何范围的情况下导入的 .
回复于 2024-04-26T17:09:12+08:00

使用:: ng-deep在角度组件的样式中@import样式

2 回答

相关问题