Angular使用cli生成自定义文件、组件的方法
不得不说，和传统的复制黏贴来创建组件的方法相比，使用angular-cli的脚手架功能来创建模块、组件显得非常高效，不仅仅有了创建了文件，还包含了一些必须的代码，同时也将组件导入了最近的模块，一些重复性工作就使用cli可以节省掉。angular提供了丰富的文件类型，但是总归是有些我们自己的项目需要，我们需要创建自定义后缀的组件，这时候就不得不舍弃cli了，那么能不能使用自定义的方式来达到脚手架创建呢？
angular脚手架创建的方式
我们首先来看看angular-cli提供的一些命令是怎么创建文件的。
看angular文档我们可以看到这个词：Schematic，这个词意为原理图。Schematic是一个脚手架库，定义如何通过创建、修改、重构或移动文件和代码来生成或转换编程项目。AngularCli使用原理图生成和修改项目文件。库开发人员可以创建原理图，使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文件在我们跑自己的命令的时候会执行。看这个文件，里面的代码虽然有点看不懂，但是猜猜还是可以的，有些关键地方：
constcomponentPath=`/${options.path}/`
+(options.flat?'':core_1.strings.dasherize(options.name)+'/')
+core_1.strings.dasherize(options.name)
+'.component';
constclassifiedName=core_1.strings.classify(`${options.name}Component`);
类似于这样的地方，我们发现就是创建对应的组件文件和里面的组件类。所以我们把所有.component和}Component的地方替换为.page和}Page:
constcomponentPath=`/${options.path}/`
+(options.flat?'':core_1.strings.dasherize(options.name)+'/')
+core_1.strings.dasherize(options.name)
+'.page';
constclassifiedName=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:`
<%=dasherize(name)%>works!
`,<%}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%><%}%>
})
exportclass<%=classify(name)%>ComponentimplementsOnInit{
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%><%}%>
})
exportclass<%=classify(name)%>PageimplementsOnInit{
constructor(){}
ngOnInit(){
}
}
OK，目前为止，我们的“原理图”就创建的差不多了，我们现在需要加入cli指令上去。在@Schematics/angular/collection.json里面定义了cli的命令，同样，先观察componet的命令：
"component":{
"aliases":["c"],//简写形式
"factory":"./component",//采用生成器
"description":"CreateanAngularcomponent.",
"schema":"./component/schema.json"
},
我们来创建我们自己的命令：
"component":{
"aliases":["pa"],//简写形式
"factory":"./page",//采用生成器
"description":"CreateanAngularcomponentpage.",
"schema":"./page/schema.json"
},
测试命令
目前为止，我们已经添加好了我们自己的生成命令，现在来尝试着生成一个page组件，在app/pages/user下面生成组件user-test，命令：nggpagepages/user/user-test，查看结果：
CREATEsrc/app/pages/user/user-test/user-test.page.css(0bytes) CREATEsrc/app/pages/user/user-test/user-test.page.html(28bytes) CREATEsrc/app/pages/user/user-test/user-test.page.ts(239bytes) UPDATEsrc/app/pages/user/user.module.ts(1803bytes)
看看生成的ts文件：
import{Component,OnInit}from'@angular/core';
@Component({
templateUrl:'./user-test.page.html',
styleUrls:['./user-test.page.css']
})
exportclassUserTestPageimplementsOnInit{
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"
}
},
再生成一下：
CREATEsrc/app/pages/user/user-test/user-test.page.less(0bytes) CREATEsrc/app/pages/user/user-test/user-test.page.html(28bytes) CREATEsrc/app/pages/user/user-test/user-test.page.ts(240bytes) UPDATEsrc/app/pages/user/user.module.ts(1804bytes)
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。