为了账号安全,请及时绑定邮箱和手机立即绑定

用什么代替:: ng-deep

/ 猿问

用什么代替:: ng-deep

慕函数4003404 2019-08-19 16:26:30

用什么代替:: ng-deep

我正在尝试将路由器出口放置的元素设置为有角度,并且要确保生成的元素的宽度为100%

从大多数回复中,我看到我应该使用::ng-deep选择器,但是从Angular的文档中它被弃用了。有替代品::ng-deep吗?


查看完整描述

3 回答

?
慕的地10843

FWIW在我的研究中,我没有找到任何替代ng-deep或其他适用的替代品。这是因为,我相信,Angular团队正在推迟关于影子dom的W3C规范,影子dom最初有选择器如deep。但是,W3c已删除了该建议,但未将其替换为新建议。在此之前,我想象Angular团队会保留::ng-deep并且它的替代品可用,但由于W3C草案的待决状态而处于弃用状态。我现在无法花时间找到备份文档,但最近我确实看到了。

简而言之:::ng-deep在创建替代品之前继续使用及其替代方案 - 弃用只是提前通知,以便在实际变更实现时人们不会瞎了眼。

更新 -

https://drafts.csswg.org/css-scoping-1/ 如果您有兴趣,这是提案草案。看起来他们正在为阴影dom树中的元素开发一组强大的选择器; 一旦获得批准,这个规范,我认为将通知角度克隆,如果有一个(即角度可能不需要实现自己的选择器一旦它在浏览器中生效)。


查看完整回答
反对 回复 2019-08-19
?
慕虎7371278

为了绕过弃用::ng-deep,我通常禁用ViewEncapsulation。虽然这不是最好的方法,但它对我有好处。

要禁用ViewEncapsulation,请在组件中执行以下操作:

import { Component, ViewEncapsulation } from '@angular/core';@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'],
  encapsulation: ViewEncapsulation.None})export class HeaderComponent {}

这将使此组件中的.scss样式成为整个应用程序的全局样式。要不允许样式上链到父组件和兄弟组件,请使用选择器包装整个scss,如下所示:

app-header {
  // your styles here and any child component styles can go here}

现在,这里指定的样式将归结为子组件,因此您必须特别使用css选择器,并在添加CSS时注意你的p和q(可能添加在Angular应用程序中指定的子选择器,然后添加其样式)。

我说这不是最好的方法,因为上面的段落,但这对我有好处。


查看完整回答
反对 回复 2019-08-19
?
芜湖不芜

深度样式的简单替代是使用父组件的元素选择器的常见样式。所以如果你在hero-details.component.css中有这个:

:host ::ng-deep h3 {
  font-style: italic;}

它会在styles.css中变成这样:

app-hero-details h3 {
  font-style: italic;}

基本上,深层风格是一种未封装的风格,因此从概念上看,它似乎更像是一种常见的风格,而不是组件风格。我个人不会再使用深刻的款式了。主要版本更新中的重大更改是正常的,不推荐使用的功能删除是公平的游戏。


查看完整回答
反对 回复 2019-08-19

添加回答

回复

举报

0/150
提交
取消
意见反馈 邀请有奖 帮助中心 APP下载
官方微信