Angular4_父组件中修改子组件样式

发布时间：2020-12-17 08:16:54 所属栏目：安全来源：网络整理

导读：两个页面共用了一个filter组件，样式是bootstrap的，有媒体查询特殊的选择器组件样式中有一些从影子(Shadow) DOM 样式范围领域（记录在W3C的CSS Scoping Module Level 1中）引入的特殊选择器： :host 选择器使用 :host 伪类选择器，用来选择组件宿主

两个页面共用了一个filter组件，样式是bootstrap的，有媒体查询

特殊的选择器

组件样式中有一些从影子(Shadow) DOM 样式范围领域（记录在W3C的CSS Scoping Module Level 1中）引入的特殊选择器：

:host 选择器

使用:host伪类选择器，用来选择组件宿主元素中的元素（相对于组件模板内部的元素）。

src/app/hero-details.component.css

content_copy:host { display: block; border: 1px solid black; }

:host选择是是把宿主元素作为目标的唯一方式。除此之外，你将没办法指定它，因为宿主不是组件自身模板的一部分，而是父组件模板的一部分。

要把宿主样式作为条件，就要像函数一样把其它选择器放在:host后面的括号中。

下一个例子再次把宿主元素作为目标，但是只有当它同时带有activeCSS 类的时候才会生效。

src/app/hero-details.component.css

content_copy:host(.active) { border-width3px}

:host-context 选择器

有时候，基于某些来自组件视图外部的条件应用样式是很有用的。例如，在文档的<body>元素上可能有一个用于表示样式主题 (theme) 的 CSS 类，你应当基于它来决定组件的样式。

这时可以使用:host-context()伪类选择器。它也以类似:host()形式使用。它在当前组件宿主元素的祖先节点中查找 CSS 类，直到文档的根节点为止。在与其它选择器组合使用时，它非常有用。

在下面的例子中，只有当某个祖先元素有 CSS 类theme-light时，才会把background-color样式应用到组件内部的所有<h2>元素中。

src/app/hero-details.component.css

content_copy-context(.theme-light) h2 { background-color: #eef; 已废弃/deep/、>>>和::ng-deep 
 
 
 
 
 直接： 
 
   < 
  delivery-order-grid 
  class= 
  "active" 也行

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!