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

Question

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

例如

聚合物

<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中，我们可以做同样的事情吗？我们将属性传递给组件，并将其设置为样式，就像上面一样？

由于

Answer 1

是的，它的工作原理基本相同。这是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;
}

Answer 2

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

然后其余的是相同的