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

Question

在 Polymer 中，我们有这样一个概念，即我们向某些组件添加特定属性，然后使用关联属性为该组件设置样式。 （这样，它将它们与不具有该属性的同一组件区分开来。

例如

聚合物

<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

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

然后其他都是一样的

Answer 2

是的，它的工作原理基本相同。这里是 an example.

组件定义：

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

}

src/retailer-details.css 文件:

:host {
  display: block;
  background-color: yellow;
}

:host[overlay] {
  border: 4px solid red;
}