Angular:如何将内联样式传递给组件

时间:2017-12-11 19:30:43

标签: angular ionic-framework

我创建了一个自定义组件。组件的HTML脚手架包含非常简单的HTML。

<!-- Generated template for the MyComponent component -->
<div>
  {{text}}
</div>

但添加这样的风格并不奏效。

<my-component style="height:300px; background:gray;"></my-component>

我想我需要将这种风格传递给<div>。但是如何?

1 个答案:

答案 0 :(得分:2)

尝试(如@ 1.618所述)

<my-component [ngStyle]="{height:'300px', background:'gray', display: 'block'}">
</my-component>

仅应用样式(使用display: blockinline-block)也可以使用:

<hello style="color: green; height:200px; background:yellow; display: block;}" 
       name="Another name"></hello>

STACKBLITZ:https://stackblitz.com/edit/angular-hy6xpc?file=app%2Fapp.component.html