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

Question

在聚合物中，我们有这个概念，我们为某些组件添加特定属性，然后使用相关属性设置该组件的样式。(这样，它可以将它们与没有该属性的同一组件区分开来。

例如

聚合体

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

然后，要使用overlay属性设置组件<osb-retailer-details>样式，我们执行以下操作：

:host {
box-sizing: border-box;
display: block;
margin: 0 0 15px;

&[overlay] {
margin-bottom: 0;
}
}

现在我的问题

在 angular4 中，我们可以做同样的事情吗？我们将属性传递给组件并设置其样式的位置，就像上面一样？

谢谢

Answer 1

是的，它基本上以相同的方式工作。下面是一个示例。

组件定义：

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

src/retailer-details.css file：

:host {
display: block;
background-color: yellow;
}
:host[overlay] {
border: 4px solid red;
}

Answer 2

<osb-retailer-details [attr.overlay]="'overlay'"></osb-retailer-details>

然后其余的都一样