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>
