[Angular] Use :host-context and the ::ng-deep selector to apply context-based styling _Selector

家资是何物，积帙列梁梠。这篇文章主要讲述[Angular] Use :host-context and the ::ng-deep selector to apply context-based styling相关的知识，希望能为你提供帮助。
If you want to style host component. You can use ‘:host-context‘.

// host@Component({ selector: ‘my-app‘, template: ` < div class="styled-component"> < hostcontext-styling> < /hostcontext-styling> < /div> `, })

In the host component, we have ‘styled-component‘ class, we want to apply some css to it from the child component:

import { Component } from ‘@angular/core‘; @Component({ selector: ‘hostcontext-styling‘, template: ` < div> I‘m a div that wants to be styled < /div> `, styles: [ ` /* apply a border if any of our ancestors has .styled-component applied */ :host-context(.styled-component) { border: 1px solid gray; display:block; } ` ] }) export class HostContextStylingComponent { }

【[Angular] Use :host-context and the ::ng-deep selector to apply context-based styling】Now if we want to style its child component, we can use ‘::ng-deep‘:

import { Component } from ‘@angular/core‘; @Component({ selector: ‘hostcontext-styling‘, template: ` < div> I‘m a div that wants to be styled < /div> < child-component> < /child-component> `, styles: [ ` /* apply a border if any of our ancestors has .styled-component applied */ :host-context(.styled-component) { border: 1px solid gray; display:block; }:host ::ng-deep p { background-color: yellow; } ` ] }) export class HostContextStylingComponent { }