在Angular 9之后,::ng-deep被标记为已弃用。现在,Angular提供了其他方法来处理嵌套样式。
首选解决方法是使用CSS自定义属性。在组件模板中,可以定义自定义属性,然后在样式表中使用这些属性。这样可以通过样式表轻松地覆盖组件内部的样式。
例如,假设需要在组件中定义一个颜色样式并应用于包含实际内容的节点。可以在组件的模板中定义自定义属性如下:
Some content
接下来,在组件的样式表中,可以使用var()函数来使用该自定义属性:
:host {
color: var(--color);
}
通过这种方式,可以确保样式只适用于组件内部,并且不需要使用::ng-deep。
除此之外,还可以使用Angular Material提供的“深度样式”(deep styles)选项,以及使用“view encapsulation”(视图封装)选项来限制样式仅应用于组件内部。例如:
@Component({
selector: 'app-example',
template: `
Some content
`,
styleUrls: ['./example.component.scss'],
encapsulation: ViewEncapsulation.ShadowDom
})
export class ExampleComponent { }
在样式表中,通过将样式限制为:host伪类并使用/deep/来指定样式深度:
:host /deep/ p {
color: blue;
}
无论使用什么方法,都应该尽量避免使用已弃用的::ng-deep。