不得不说,和传统的复制黏贴来创建组件的方法相比,使用angular-cli的脚手架功能来创建模块、组件显得非常高效,不仅仅有了创建了文件,还包含了一些必须的代码,同时也将组件导入了最近的模块,一些重复性工作就使用cli可以节省掉。angular提供了丰富的文件类型,但是总归是有些我们自己的项目需要,我们需要创建自定义后缀的组件,这时候就不得不舍弃cli了,那么能不能使用自定义的方式来达到脚手架创建呢?
angular 脚手架创建的方式
我们首先来看看angular-cli提供的一些命令是怎么创建文件的。
看angular文档我们可以看到这个词:Schematic,这个词意为原理图。Schematic是一个脚手架库,定义如何通过创建、修改、重构或移动文件和代码来生成或转换编程项目。Angular Cli使用原理图生成和修改项目文件。库开发人员可以创建原理图,使Cli能够生成其已发布的库。可以查看https://www.npmjs.com/package/@angular-devkit/schematics。
那这样的话,我们可以知道angular是借助的Schematic来生成项目文件。再查看发现node_module里面有个@Schematics/angular,里面定义了我们可以使用cli生成的所有文件,包括components\class\enum\interface等等。
点开查看components,里面有一些ts文件,还有一个files文件夹,里面包含着所有我们生成component的文件:
__name@dasherize@if-flat__
__name@dasherize__.component.__styleext__
__name@dasherize__.component.html
__name@dasherize__.component.spec.ts
__name@dasherize__.component.ts
那想想,在我们运行Cli创建组件的时候,会使用这里的模板,用file文件夹里面的文件生成项目组件。其他的先不管,我们按照这里的components是不是可以来构造我们自己的“原理图”呢?
自定义原理图
先看看我们的需求,我们现在项目的项目里面,页面是page,按照angular原来的写法,所有的page的组件都是:XXXX.component.ts。我们为了将页面和组件进行区分,页面的文件都是XXX.page.ts。我们先在node_module/@Schematics/angula/下面复制component新建一个page。
现在,将page下面的files文件夹中的文件名.component都改为.page(由于我们不用单元测试文件,直接删除.spec.ts文件即可):
page
files
__name@dasherize@if-flat__
__name@dasherize__.page.__styleext__
__name@dasherize__.page.html
__name@dasherize__.page.ts
index.d.ts
index.js 命令运行时会执行这个js文件
schema.d.ts
schema.json 定义了这个生成器命令可以接受的参数
接下来再看page里面的index.js,这个js文件在我们跑自己的命令的时候会执行。看这个文件,里面的代码虽然有点看不懂,但是猜猜还是可以的,有些关键地方:
const componentPath = `/${options.path}/` + (options.flat ? '' : core_1.strings.dasherize(options.name) + 'https://www.jb51.net/') + core_1.strings.dasherize(options.name) + '.component'; const classifiedName = core_1.strings.classify(`${options.name}Component`);
类似于这样的地方,我们发现就是创建对应的组件文件和里面的组件类。所以我们把所有.component和}Component的地方替换为.page和}Page:
const componentPath = `/${options.path}/` + (options.flat ? '' : core_1.strings.dasherize(options.name) + 'https://www.jb51.net/') + 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应该修改为: