import { Component, OnInit<% if(!!viewEncapsulation) { %>, ViewEncapsulation<% }%><% if(changeDetection !== 'Default') { %>, ChangeDetectionStrategy<% }%> } from '@angular/core'; @Component({ templateUrl: './<%= dasherize(name) %>.page.html', <% if(inlineStyle) { %> styles: []<% } else { %> styleUrls: ['./<%= dasherize(name) %>.page.<%= styleext %>']<% } %><% if(!!viewEncapsulation) { %>, encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection !== 'Default') { %>, changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %> }) export class <%= classify(name) %>Page implements OnInit { constructor() { } ngOnInit() { } }
OK，目前为止，我们的“原理图”就创建的差不多了，我们现在需要加入cli指令上去。在@Schematics/angular/collection.json里面定义了cli的命令，同样，先观察componet的命令：
"component": { "aliases": [ "c" ], // 简写形式 "factory": "./component", // 采用生成器 "description": "Create an Angular component.", "schema": "./component/schema.json" },
我们来创建我们自己的命令：
"component": { "aliases": [ "pa" ], // 简写形式 "factory": "./page", // 采用生成器 "description": "Create an Angular component page.", "schema": "./page/schema.json" },
测试命令
目前为止，我们已经添加好了我们自己的生成命令，现在来尝试着生成一个page组件，在app/pages/user下面生成组件user-test，命令：ng g page pages/user/user-test，查看结果：
CREATE src/app/pages/user/user-test/user-test.page.css (0 bytes) CREATE src/app/pages/user/user-test/user-test.page.html (28 bytes) CREATE src/app/pages/user/user-test/user-test.page.ts (239 bytes) UPDATE src/app/pages/user/user.module.ts (1803 bytes)
看看生成的ts文件：
import { Component, OnInit } from '@angular/core'; @Component({ templateUrl: './user-test.page.html', styleUrls: ['./user-test.page.css'] }) export class UserTestPage implements OnInit { constructor() { } ngOnInit() { } }
非常好啊，完全满足我们的需求。
慢着，我现在项目中使用的是less，而且使用component创建的组件里面的样式文件都是less，为啥我们自定义的生成的是css文件？？？
很可能是没有识别我们自定义的less，那我们自定义的less是怎么定的呢？看看angular.json文件中有个project里面：
"schematics": { "@schematics/angular:component": { "styleext": "less" } },
也就是说，我们在这里配置了生成component组件时，styleext为less，我们的page命令是没有配置的，所以会找默认的样式文件后缀。那我们在这里尝试加上试试看：
"schematics": { "@schematics/angular:component": { "styleext": "less" }, "@schematics/angular:page": { "styleext": "less" } },
再生成一下：
CREATE src/app/pages/user/user-test/user-test.page.less (0 bytes) CREATE src/app/pages/user/user-test/user-test.page.html (28 bytes) CREATE src/app/pages/user/user-test/user-test.page.ts (240 bytes) UPDATE src/app/pages/user/user.module.ts (1804 bytes)