怎么在Angular中使用cli生成自定义文件
这篇文章给大家介绍怎么在Angular中使用cli生成自定义文件,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
站在用户的角度思考问题,与客户深入沟通,找到原州网站设计与原州网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:成都做网站、成都网站制作、企业官网、英文网站、手机端网站、网站推广、域名申请、网站空间、企业邮箱。业务覆盖原州地区。
自定义原理图
先看看我们的需求,我们现在项目的项目里面,页面是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) + '/') + 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) + '/') + 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: `<%= 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 %><% } %> }) 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)
关于怎么在Angular中使用cli生成自定义文件就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
网页题目:怎么在Angular中使用cli生成自定义文件
URL链接:http://scjbc.cn/article/jsdgic.html