代码之家  ›  专栏  ›  技术社区  ›  James

如何根据属性设置Angular4自定义组件的样式?

  •  0
  • James  · 技术社区  · 8 年前

    聚合物

    <osb-retailer-details overlay></osb-retailer-details>
    <osb-retailer-details></osb-retailer-details>

    然后是风格 <osb-retailer-details> overlay 属性,我们执行以下操作:

    :host {
      box-sizing: border-box;
      display: block;
      margin: 0 0 15px;
      
      &[overlay] {
        margin-bottom: 0;
      }
    }

    在angular4中,我们可以做同样的事情吗?我们在哪里将属性传递给组件,并对其进行样式设置,就像上面一样?

    谢谢

    2 回复  |  直到 8 年前
        1
  •  1
  •   JB Nizet    8 年前

    an example .

    @Component({
      selector: 'osb-retailer-details',
      template: '<div>hello world</div>',
      styleUrls: ['src/retailer-details.css']
    })
    export class RetailerDetails {
    
    }
    

    src/零售商详细信息。css文件:

    :host {
      display: block;
      background-color: yellow;
    }
    
    :host[overlay] {
      border: 4px solid red;
    }
    
        2
  •  0
  •   Milad    8 年前
    <osb-retailer-details [attr.overlay]="'overlay'"></osb-retailer-details>
    

    推荐文章