类似于这样的地方，我们发现就是创建对应的组件文件和里面的组件类。所以我们把所有.component和}Component的地方替换为.page和}Page:

const componentPath = `/${options.path}/`
            + (options.flat ? '' : core_1.strings.dasherize(options.name) + '/')
            + core_1.strings.dasherize(options.name)
            + '.page';
const classifiedName = core_1.strings.classify(`${options.name}Page`);

然后接下来再看page/files/__name@dasherize__.page.ts：

import { Component, OnInit<% if(!!viewEncapsulation) { %>, ViewEncapsulation<% }%><% if(changeDetection !== 'Default') { %>, ChangeDetectionStrategy<% }%> } from '@angular/core';
@Component({
  selector: '<%= selector %>',<% if(inlinetemplate) { %>
  template: `
    <p>
      <%= dasherize(name) %> works!
    </p>
  `,<% } else { %>
  templateUrl: './<%= dasherize(name) %>.component.html',<% } if(inlineStyle) { %>
  styles: []<% } else { %>
  styleUrls: ['./<%= dasherize(name) %>.component.<%= styleext %>']<% } %><% if(!!viewEncapsulation) { %>,
  encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection !== 'Default') { %>,
  changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %>
})
export class <%= classify(name) %>Component implements OnInit {
  constructor() { }
  ngOnInit() {
  }
}

这个是生成的组件的ts模板，我们需要根据我们的需求来改造，首先是文件里面的类，既然我们现在的文件名是XXX.page.ts，那么里面的类也就需要时XXxpage形式的，并且我们的页面是不允许作为指令的形式出现的，所以也要去掉selector元数据。那综合下来，我们的__name@dasherize__.page.ts应该修改为：

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)

完美~