如何基于属性设置Angular4自定义组件的样式? [英] How to style Angular4 custom components based on attribute?

问题描述

在Polymer中，我们有一个概念，即为某些组件添加特定的属性，然后使用相关的属性对该组件进行样式设置. (通过这种方式，它将它们与没有该属性的相同组件区分开.

In Polymer we have this concept where we add specific properties to certain components, and then style that component with associated attribute. (This way, it differentiates them from the same component that doesnt have that attribute.

例如

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

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

And then to style <osb-retailer-details> component with overlay attribute, we do the following:

:host {
  box-sizing: border-box;
  display: block;
  margin: 0 0 15px;
  
  &[overlay] {
    margin-bottom: 0;
  }
}

在angular4中，我们可以做同样的事情吗?像上面一样，我们在哪里将属性传递给组件并对其进行样式设置?

In angular4, can we do the same thing? Where we pass attribute to component, and style it, just like above?

谢谢

推荐答案

是的，它的工作方式基本上相同.这是一个示例.

Yes, it basically works the same way. Here's an example.

组件定义:

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

}

src/retailer-details.css文件:

src/retailer-details.css file:

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

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

这篇关于如何基于属性设置Angular4自定义组件的样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！