发布于 4年前
Angular CLI：添加组件ng generate component
Angular CLI添加组件命令
ng generate component [name]
命令里的name为组件名，而generate指令可以简写为g：
ng g component [name]
示例
$ ng g component mydemo
create src/app/mydemo/mydemo.component.html (25 bytes)
create src/app/mydemo/mydemo.component.spec.ts (628 bytes)
create src/app/mydemo/mydemo.component.ts (270 bytes)
create src/app/mydemo/mydemo.component.css (0 bytes)
update src/app/app.module.ts (671 bytes)
示例创建了mydemo的组件。
ng g component为我们做了几件事：
- 在app的目录下新建了mydemo（即组件名）文件夹
- 在mydemo目录下分别创建mydemo组件的相关文件
- html：mydemo.component.html
- css：mydemo.component.css
- spec：用于测试测mydemo.componnent.spec.ts
- 组件：mydemo.component.ts
- 更新app.module.ts，添加了MydemoComponent到模块的declarations声明里。
直接创建组件
指令默认会创建以组件命名的文件夹，可以使用--flat选项直接在当前目录创建组件。
$ ng g component --flat mydemo1
create src/app/mydemo1.component.html (26 bytes)
create src/app/mydemo1.component.spec.ts (635 bytes)
create src/app/mydemo1.component.ts (274 bytes)
create src/app/mydemo1.component.scss (0 bytes)
update src/app/app.module.ts (749 bytes)
指定组件所属组件
指令默认会把组件添加到app.module.ts的声明里，可以使用--module（简写-m）指定组件所属模块。
$ng g component --flat -m mymodule mydemo2
create src/app/mydemo2.component.html (26 bytes)
create src/app/mydemo2.component.spec.ts (635 bytes)
create src/app/mydemo2.component.ts (274 bytes)
create src/app/mydemo2.component.scss (0 bytes)
update src/app/mymodule/mymodule.module.ts (265 bytes)
内嵌模板和样式
指令默认会新建html和css文件，使用--inline-style(简写-is)指定内嵌样式，使用--inline-template(简写-it)指定内嵌模板。
$ ng g component --flat --inline-style --inline-template mydemo3
create src/app/mydemo3.component.spec.ts (635 bytes)
create src/app/mydemo3.component.ts (259 bytes)
update src/app/app.module.ts (827 bytes)
不创建测试文件
指令默认会新建spec.ts文件。使用--spec=false不创建测试文件
$ ng g component --flat --spec=false mydemo5
create src/app/mydemo5.component.html (26 bytes)
create src/app/mydemo5.component.ts (274 bytes)
create src/app/mydemo5.component.scss (0 bytes)
update src/app/app.module.ts (983 bytes)
其他指令
- --app (简写-a) ：指定app名称，默认值app
- --change-detection (简写-cd)：指定变化检测策略
- --export：指定是否在声明的模块导出组件，默认值false
- --skip-import：是否忽略在模块添加组件声明，默认为false
- --view-encapsulation (简写-ve)：指定view encapsulation策略。
