Angular组件默认样式css显示块。

Question

我很烦我的所有角度元素都是0x0像素，因为它们的名称例如app-card、app-accordion，浏览器无法识别为符合HTML5标准的元素，因此不会给任何默认样式。

这意味着在Chrome中检查它时，我无法看到容器尺寸，当DOM真的很深时，很难理解哪个元素包含哪个屏幕区域等。

对我来说，所有角度元素默认应该以块显示，因为对大多数元素而言都是有意义的。

例如，请考虑这些元素

bbs-accordion-header //(width 0px, height 0px)

包含

bbs-accordion-header-regular //(width 1920px, height 153px)

bbs-accordion-header没有任何尺寸，即使它的子元素有尺寸。

我通过手动向每个元素的.scss文件添加一行来解决这个问题。

:host { display: block; }

但是每次手动添加这些内容非常繁琐。有没有人知道更好的解决方案？

- Karl Johan Vallner

---

请参见 https://github.com/angular/angular/issues/5960。 - jonrsharpe

由于上述问题已经关闭，这里又出现了一个新问题。我会把它留在这里供参考：angular/angular-cli#12244。 - biolauri

Answer 1

我的拉取请求已经合并。

随着即将发布的 Angular CLI v9.1.0，一个新选项将会可用：

--displayBlock=true|false

文档: https://next.angular.io/cli/generate#component

如需快速了解：现在可以在 v9.1.0-next.0 中使用

使用CLI时:

ng generate component dashboard --displayBlock=true

在 angular.json 中设置默认值：

...
"projectType": "application",
"schematics": {
    "@schematics/angular:component": {
      "displayBlock": true
   }
 }
...

从现在开始，任何生成的组件，无论是内联 CSS 还是不带内联 CSS，都将包含以下 CSS:

:host { display: block; }

有关更详细的信息，请访问此处：https://blog.rryter.ch/2020/01/19/angular-cli-generating-block-components-by-default/

- rryter