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

Posted Answer1215

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[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>
      Im 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 {
}

 

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>
      Im 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 {
}

 

以上是关于[Angular] Use :host-context and the ::ng-deep selector to apply context-based styling的主要内容,如果未能解决你的问题,请参考以下文章

[Angular2 Form] Use RxJS Streams with Angular 2 Forms

[Immutable + AngularJS] Use Immutable .List() for Angular array

angular ng-bind-html异常Attempting to use an unsafe value in a safe context处理

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

npm use local module

angular.identity