无法设置组件的宽度答案

【问题标题】：Cannot set width of component无法设置组件的宽度
【发布时间】：2022-10-14 14:22:15
【问题描述】：

我有一个简单的 hello world 组件，我想为其设置边框。似乎主机元素的宽度为 0 px，我无法更改。（我可以在 h1 元素周围做一个边框，但不能在包含的角度组件周围。）

这是我的堆栈闪电战：https://stackblitz.com/edit/angular-ivy-jbjcdt?file=src/app/app.component.html

这是组件：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'hello',
  template: `<h1>Hello World!</h1>`,
  styles: [`h1 { font-family: Lato; }`],
})
export class HelloComponent {
  @Input() name: string;
}

这是 app.component.html：

<hello style="width:500px; background-color:red; border:dashed blue"></hello>

【问题讨论】：

标签： angular

【解决方案1】：

Angular 的默认行为是为组件设置display:inline。这意味着组件将占用与其内容一样多的宽度。为了在组件本身上设置宽度，您应该将它的显示属性定义为

display: inline-block;

或者

display: block;

【讨论】：