Angular2中给宿主元素设置样式的2种方式

primeng开源组件的 host element 基本不会有样式设置，但是最近有个需求，能够定义全局css来设置一些表单控件的宽度。

常规

不在host elemnet上增加样式

@Component({
    selector: 'my-comp',
    template: `
      <div style="width: 100%;height: 30px;border: 1px solid red">
               
      </div>
      
    `
})

浏览器渲染的结果:

图片1

通过style :host 的方式

@Component({
    selector: 'my-comp',
    template: `
      <div style="width: 100%;height: 30px;border: 1px solid red">
        
          
      </div>
      
    `,
    styles:[`
        :host {
            display:inline-block; 
            min-width: 50px;
        }
     
    `]
})

host element 上的样式应用

使用host 属性

.ui-host {
  display:inline-block;
  min-width:240px;
}

@Component({
    selector: 'my-comp',
    template: `
      <div style="width: 100%;height: 30px;border: 1px solid red">
        
          
      </div>
      
    `,
  host: {
    '[class.ui-host]': 'true'
  }
})

会在host element 上设置样式类

总结

可能大部分人是不需要在host elemen 上设置样式的。不过自己在写组件时，例如: 一个 input 框，你可能提供了属性来设置width，但是大部分情况下是作用域 template 中的。

实际项目中，我需要定义个全局的样式，设置 input 框的宽度，我可能更倾向于通过标签名来设置宽度。

按照上面例子，修改元素的宽度，我就可以这样定义全局css:

my-comp{
    width: 400px   // 由于上面是min-with，所以会有效
}

host 设置样式的几种方式

  host: {
        '[class.ui-host1]': 'true',
        'class':'ui-host2',
        '[style.width]': 'width',
        '[style.height]': "'20px'",
        "style":"display:inline-block; border:1px solid red"
  }

渲染后的结果

<test class="ui-host2 ui-host1" style="display: inline-block; border: 1px solid red; width: 20px; height: 20px;">2225</test>