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