angular - 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; }

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

score 38 · Accepted Answer

随着即将发布的 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; }