Question

我有一个简单的组件，使用这样的模板：

<span style="display:inline-block;" #control>Content here</span>

然后，在呼叫网站中，我摆弄了样式：

<my-comp style="width:300px;"></my-comp>

......完全没有任何成就。在运行时，上述内容转换为：

<my-comp style="width:300px;" class="ng-untouched ng-pristine ng-valid">
  <span style="display:inline-block;" #control>Content here</span>
</my-comp>

绝佳。在<my-comp>上，宽度被忽略，在<span>我想要的地方，它不会被应用。

我知道我可以将宽度作为我的组件的属性，然后将其应用到模板中，但我的问题比这更广泛：如果我不想对所应用的样式进行规定，该怎么办？有没有办法让调用网站的属性自动应用于模板的外部元素？

Answer 1

自定义组件在浏览器中呈现为inline，这意味着您无法为其添加宽度，除非您更改其定位（absolute / fixed）或更改显示（block / inline-block / flex / inline-flex）。

因此要么改变内联样式（皱眉），要么在组件中添加css规则：

@Component({
   selector : 'my-comp',
   template : `...`,
   styles : [`:host{display: inline-block}`]
})
export class MyCompComponent {}

将组件应用于Angular2中的模板

1 个答案: