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

Question

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

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

但是添加这样的样式并不起作用。

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

我想我需要将该样式传递给 <div> 。但如何呢？

Answer 1

尝试(正如@1.618已经提到的)

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

仅应用样式(使用 display: block 或 inline-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