代码之家 › 专栏 › 技术社区 › James

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

polymer typescript angular

0

James · 技术社区 · 8 年前

聚合物

<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中,我们可以做同样的事情吗?我们在哪里将属性传递给组件,并对其进行样式设置,就像上面一样?

谢谢

2 回复 | 直到 8 年前

1

JB Nizet 8 年前

an example .

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

}

src/零售商详细信息。css文件:

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

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

2

0

Milad 8 年前

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