angular 控件css_Angular父组件内修改子组件的样式

在使用NG-ZORRO组件的过程中，需要根据产品的需要，在某些页面修改某些NZ组件的样式。但是由于angular默认采用了Emulated的视图封装模式，导致即便我们想在父组件中直接去重写子组件的样式，也无法办到。

例如AppComponent是一个"父组件",其内包含Comp1Component与Comp2Component两个"子组件"。即使我在AppComponent中添加样式如下样式，然而组件1的字体颜色依然没有变成红色。设置在控制台选中组件1，styles中根本没有对应的样式。

.f-red{

color: red;

}

/* 企图修改组件1的字体颜色 */

#comp1{

color: red;

}

问题分析

angular组件的CSS样式被封装进了自己的视图中，而不会影响到应用程序的其它组件,这个效果在大部分时候非常的有用,我们不用担心某个组件的代码会污染其子组件,但当我们想改变第三方库的样式的时候也非常的麻烦。angular的视图封装模式默认是Emulated 模式,以下是官方对其功能的描述。

通过预处理(并改名)CSS 代码来模拟 Shadow DOM 的行为，以达到把 CSS 样式局限在组件视图中的目的。

其实如果在html中搜索#comp1,会得到如下的结果。angular默认的为每个组件添加了一个属性，同样也为css限定了对应的属性。这也是为什么在"父组件"修改"子组件"不生效,因为根本找不到#comp1[_ngcontent-haw-c0]选择器对应的元素。

解决办法

可以使用 /deep/、>>>或::ng-deep选择器来强制一个样式对各级子组件的视图也生效，它不但会作用于组件的子视图，也会作用于投影进来的内容(ng-content)。

.f-red{

color: red;

}

/* 企图修改组件1的字体颜色 */

/* :host ::ng-deep #comp1{

color: red;

} */

:host /deep/ #comp1{

color: red;

}

需要注意的是CSS标准中用于"刺穿 Shadow DOM"的组合器已经被废弃，并将这个特性从主流浏览器和工具中移除。angular官方建议统一使用 ::ng-deep，以便兼容将来的工具。

原文：https://blog.51cto.com/13876655/2393237

angular 控件css_Angular父组件内修改子组件的样式相关推荐

Vue3 使用expose让父组件直接修改子组件的值
最近写Vue3项目的时候无意间知道expose这个语法糖,expose可以使父组件直接去修改子组件的数据,那么废话不多说下面演示一下
angular 控件css_Angular 4 设置组件样式的几种方式
你用Angular吗? 一.介绍如何只改动最简单的css代码,呈现完全不一样的视图效果. 第一种:最基本的设置: 图1 代码图2 界面运行效果图平常,想给一个label或者p等标签添加样式,我们 ...
angular新版父组件修改子组件某个div样式
 <div class="wrapper"><app-child></app-child& ...
WPF查找子控件和父控件方法
原文:WPF查找子控件和父控件方法 public List<T> GetChildObjects<T>(DependencyObject obj, string name) w ...
vue组件中的样式属性：scoped，解决在父组件中无法修改子组件样式问题
Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使 ...
vue ui无效_vue开发中，父组件添加scoped之后。解决在父组件中无法修改子组件样式问题。...
在vue的开发中,我们需要引用子组件,包括ui组件(element.iview).但是在父组件中添加scoped之后,在父组件中书写子组件的样式是无效果的.去掉scoped之后,样式可以覆盖.但这样会 ...
pyqt 子控件更新父控件ui
可以用信号槽,好像专业点. 也可以直接用变量通信. 子控件更新父控件ui时,重新弹了一个窗口,父控件重新建了一个实例仔细查原因是子控件,父控件都有信号槽,相互连接,把关系搞串了,后来删掉一端的信号 ...
WPF获取当前用户控件的父级窗体
方式一.通过当前控件名获取父级窗体Window targetWindow = Window.GetWindow(button);方式二.通过当前控件获取父级窗体Window parentWindow ...
android 控件覆盖关系,安卓子控件抢占父控件点击事件或者焦点问题
开发中很常见的一个问题,项目中的lListview不仅仅是简单的文字,常常需要自己定义listview,自己的Adapter去继承BaseAdapter,在adapter中按照需求进行编写,问题就出现 ...

angular 控件css_Angular父组件内修改子组件的样式

angular 控件css_Angular父组件内修改子组件的样式相关推荐

最新文章

热门文章