Angular组件默认样式css显示块

Question

我讨厌我所有的 angular 元素都是 0x0 像素，因为它们的名称如 app-card、app-accordion，浏览器无法将其识别为 HTML5兼容的元素，因此不会给任何默认样式。

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

我觉得默认情况下所有 angular 元素都应该块显示是合乎逻辑的，因为对于大多数人来说，这是有道理的。

例如，考虑这些元素

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

包含

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

所以 bbs-accordion-header 没有任何尺寸，尽管 children 确实有尺寸。

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

:host { display: block; }

但是每次都手动添加这个非常繁琐。有人知道更好的解决方案吗？

Answer 1

随着即将发布的 Angular CLI v9.1.0 将提供一个新选项：

--displayBlock=true|false

对于不耐烦的人：现在可以在 v9.1.0-next.0

使用 CLI 时：

ng generate component dashboard --displayBlock=true

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

从现在开始，任何生成的组件，无论是否内联 css，都将包含 css:

:host { display: block; }