zoukankan      html  css  js  c++  java
  • [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 {
    }

    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 {
    }
  • 相关阅读:
    2171 棋盘覆盖
    [网络流24题] 骑士共存
    COGS28 [NOI2006] 最大获利[最大权闭合子图]
    1066: [SCOI2007]蜥蜴
    1877: [SDOI2009]晨跑
    POJ 2125 Destroying the Graph 二分图最小点权覆盖
    LA 3231
    3028: 食物
    PYOJ 44. 【HNSDFZ2016 #6】可持久化线段树
    1597: [Usaco2008 Mar]土地购买
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7599728.html
Copyright © 2011-2022 走看看