Angular使用cli生成自定义文件、组件的方法

 更新时间:2018年09月04日 15:18:06   作者:tony  
这篇文章主要介绍了Angular使用cli生成自定义文件、组件的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

不得不说,和传统的复制黏贴来创建组件的方法相比,使用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

  1. files
    1. __name@dasherize@if-flat__
    2. __name@dasherize__.page.__styleext__
    3. __name@dasherize__.page.html
    4. __name@dasherize__.page.ts
  2. index.d.ts
  3. index.js 命令运行时会执行这个js文件
  4. schema.d.ts
  5. 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: `
  <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)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • AngularJs 终极购物车(实例讲解)

    AngularJs 终极购物车(实例讲解)

    下面小编就为大家带来一篇AngularJs 终极购物车的实例讲解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • Angular中支持SCSS的方法

    Angular中支持SCSS的方法

    这篇文章主要介绍了Angular中支持SCSS的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • Angular2关于@angular/cli默认端口号配置的问题

    Angular2关于@angular/cli默认端口号配置的问题

    本篇文章主要介绍了Angular2关于@angular/cli默认端口号配置的问题,非常具有实用价值,需要的朋友可以参考下
    2017-07-07
  • 使用Angular CLI生成路由的方法

    使用Angular CLI生成路由的方法

    这篇文章主要介绍了使用Angular CLI生成路由的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • 收藏AngularJS中最重要的核心功能

    收藏AngularJS中最重要的核心功能

    本文是小编日常收集整理的关于:AngularJS中最重要的核心功能,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2017-07-07
  • angularJS实现不同视图同步刷新详解

    angularJS实现不同视图同步刷新详解

    今天小编就为大家分享一篇angularJS实现不同视图同步刷新详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-10-10
  • 深入理解Angular4订阅(Subscribe)与取消

    深入理解Angular4订阅(Subscribe)与取消

    这篇文章主要介绍了深入理解Angular4订阅(Subscribe)与取消,详细的介绍了订阅与取消的使用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • 分享Angular http interceptors 拦截器使用(推荐)

    分享Angular http interceptors 拦截器使用(推荐)

    AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。这篇文章主要介绍了分享Angular http interceptors 拦截器使用(推荐),需要的朋友可以参考下
    2019-11-11
  • Angular(5.2->6.1)升级小结

    Angular(5.2->6.1)升级小结

    今天小编就为大家分享一篇关于Angular(5.2->6.1)升级小结,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2018-12-12
  • angular5 httpclient的示例实战

    angular5 httpclient的示例实战

    本篇文章主要介绍了angular5 httpclient的示例实战,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03

最新评论