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为我们做了几件事:

  1. 在app的目录下新建了mydemo(即组件名)文件夹
  2. 在mydemo目录下分别创建mydemo组件的相关文件
  3. html:mydemo.component.html
  4. css:mydemo.component.css
  5. spec:用于测试测mydemo.componnent.spec.ts
  6. 组件:mydemo.component.ts
  7. 更新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策略。

版权声明:著作权归作者所有。

相关推荐

Angular入口组件(entry component)和声明式组件的区别

Angular的声明式组件和入口组件的区别体现在两者的加载方式不同。声明式组件是通过组件声明的selector加载入口组件(entry component)是通过组件的类型动态加载声明式组件声明式组件会在模板里通过组件声明的selector加载组件。示例@Component({   selector: 'a-cmp',   templat

Angular CLI 集成jQuery

Angular CLI有两种方式集成jQuery:以全局方式导入和以模块方式导入。安装在导入jQuery之前需要先安装:npm install jquery --save npm install @types/jquery --save 全局方式在.angular-cli.json的app.scripts引入jquery&quo

Angular CLI:集成Angular Flex Layout

Angular CLI创建项目ng new myproject 安装Angular Flex Layoutnpm install @angular/flex-layout --save 导入Angular Flex Layout NgModule模块src/app/app.module.t

查看angular cli版本

ng help version 查看帮助说明$ ng help version ng version <options...>  Outputs Angular CLI version.  aliases: v, --version, -v  --

撤回Angular CLI执行的ng eject

使用angular cli执行ng eject后,就不允许执行ng server或ng build。执行ng server 或ng build会报一下错误:An ejected project cannot use the build command