如何在Angular 12中创建display: block样式的组件？

Angular CLI默认生成的组件，其宿主元素的默认样式是display: inline。要直接生成带display: block样式的组件，有两种实用方法：

1. 单个组件创建时指定选项 #

在使用CLI生成组件的命令中，添加--display block参数即可：

ng generate component my-block-component --display block
# 或者简写
ng g c my-block-component --display block

执行后，生成的组件样式文件（比如my-block-component.component.css）会自动添加宿主样式：

:host {
  display: block;
}

2. 修改全局配置，默认所有新组件都是block #

如果希望所有后续生成的组件都默认使用display: block，可以修改项目根目录的angular.json配置文件：

1. 找到schematics节点，若不存在则手动添加
2. 在@schematics/angular:component配置中加入"display": "block"，示例如下：

"schematics": {
  "@schematics/angular:component": {
    "style": "css",
    "display": "block"
  }
}

保存配置后，后续用ng g c生成的组件都会自动带上display: block的宿主样式。

注：:host是Angular特有的选择器，专门用于设置组件宿主元素的样式，确保样式只作用于当前组件的根元素。

内容的提问来源于stack exchange，提问作者Papun Sahoo