Angular使用cli生成自定義文件、組件的方法
不得不說，和傳統(tǒng)的復制黏貼來創(chuàng)建組件的方法相比，使用angular-cli的腳手架功能來創(chuàng)建模塊、組件顯得非常高效，不僅僅有了創(chuàng)建了文件，還包含了一些必須的代碼，同時也將組件導入了最近的模塊，一些重復性工作就使用cli可以節(jié)省掉。angular提供了豐富的文件類型，但是總歸是有些我們自己的項目需要，我們需要創(chuàng)建自定義后綴的組件，這時候就不得不舍棄cli了，那么能不能使用自定義的方式來達到腳手架創(chuàng)建呢？
angular 腳手架創(chuàng)建的方式
我們首先來看看angular-cli提供的一些命令是怎么創(chuàng)建文件的。
看angular文檔我們可以看到這個詞：Schematic，這個詞意為原理圖。Schematic是一個腳手架庫，定義如何通過創(chuàng)建、修改、重構(gòu)或移動文件和代碼來生成或轉(zhuǎn)換編程項目。Angular Cli使用原理圖生成和修改項目文件。庫開發(fā)人員可以創(chuàng)建原理圖，使Cli能夠生成其已發(fā)布的庫?？梢圆榭?a target="_blank" rel="external nofollow" >https://www.npmjs.com/package/@angular-devkit/schematics。
那這樣的話，我們可以知道angular是借助的Schematic來生成項目文件。再查看發(fā)現(xiàn)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創(chuàng)建組件的時候，會使用這里的模板，用file文件夾里面的文件生成項目組件。其他的先不管，我們按照這里的components是不是可以來構(gòu)造我們自己的“原理圖”呢？
自定義原理圖
先看看我們的需求，我們現(xiàn)在項目的項目里面，頁面是page，按照angular原來的寫法，所有的page的組件都是：XXXX.component.ts。我們?yōu)榱藢㈨撁婧徒M件進行區(qū)分，頁面的文件都是XXX.page.ts。我們先在node_module/@Schematics/angula/下面復制component新建一個page。
現(xiàn)在，將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 命令運行時會執(zhí)行這個js文件
- schema.d.ts
- schema.json 定義了這個生成器命令可以接受的參數(shù)
接下來再看page里面的index.js，這個js文件在我們跑自己的命令的時候會執(zhí)行。看這個文件，里面的代碼雖然有點看不懂，但是猜猜還是可以的，有些關鍵地方：
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`);
類似于這樣的地方，我們發(fā)現(xiàn)就是創(chuàng)建對應的組件文件和里面的組件類。所以我們把所有.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模板，我們需要根據(jù)我們的需求來改造，首先是文件里面的類，既然我們現(xiàn)在的文件名是XXX.page.ts，那么里面的類也就需要時XXXPage形式的，并且我們的頁面是不允許作為指令的形式出現(xiàn)的，所以也要去掉selector元數(shù)據(jù)。那綜合下來，我們的__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，目前為止，我們的“原理圖”就創(chuàng)建的差不多了，我們現(xiàn)在需要加入cli指令上去。在@Schematics/angular/collection.json里面定義了cli的命令，同樣，先觀察componet的命令：
"component": {
"aliases": [ "c" ], // 簡寫形式
"factory": "./component", // 采用生成器
"description": "Create an Angular component.",
"schema": "./component/schema.json"
},
我們來創(chuàng)建我們自己的命令：
"component": {
"aliases": [ "pa" ], // 簡寫形式
"factory": "./page", // 采用生成器
"description": "Create an Angular component page.",
"schema": "./page/schema.json"
},
測試命令
目前為止，我們已經(jīng)添加好了我們自己的生成命令，現(xiàn)在來嘗試著生成一個page組件，在app/pages/user下面生成組件user-test，命令：ng g page pages/user/user-test，查看結(jié)果：
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() {
}
}
非常好啊，完全滿足我們的需求。
慢著，我現(xiàn)在項目中使用的是less，而且使用component創(chuàng)建的組件里面的樣式文件都是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)
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
AngularJS基于ui-route實現(xiàn)深層路由的方法【路由嵌套】
這篇文章主要介紹了AngularJS基于ui-route實現(xiàn)深層路由的方法,涉及AngularJS路由嵌套操作相關實現(xiàn)步驟與技巧,需要的朋友可以參考下2016-12-12
本篇文章主要介紹了angularJS深拷貝，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
這篇文章主要介紹了AngularJS表單驗證功能,結(jié)合具體實例形式分析了AngularJS表單驗證的操作步驟、實現(xiàn)技巧與相關注意事項,需要的朋友可以參考下2017-05-05
詳解AngularJs中$sce與$sceDelegate上下文轉(zhuǎn)義服務
這篇文章給大家詳細介紹了AngularJs提供的嚴格上下文轉(zhuǎn)義服務$sce與$sceDelegate，文中介紹的很詳細，有需要的朋友們可以參考借鑒。2016-09-09
AngularJS實現(xiàn)分頁顯示數(shù)據(jù)庫信息
這篇文章主要為大家詳細介紹了AngularJS實現(xiàn)分頁顯示數(shù)據(jù)庫信息效果的相關資料，感興趣的小伙伴們可以參考一下2016-07-07
AngularJS中ng-options實現(xiàn)下拉列表的數(shù)據(jù)綁定方法
今天小編就為大家分享一篇AngularJS中ng-options實現(xiàn)下拉列表的數(shù)據(jù)綁定方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
本文主要介紹AngularGauge 屬性的知識，這里這里了詳細的資料來介紹AngularGauge屬性的內(nèi)容知識，幫助大家學習參考，有需要的小伙伴可以參考下2016-09-09
AngularJS ng-repeat指令中使用track by子語句解決重復數(shù)據(jù)遍歷錯誤問題
這篇文章主要介紹了AngularJS ng-repeat指令中使用track by子語句解決重復數(shù)據(jù)遍歷錯誤問題,結(jié)合實例形式分析了ng-repeat指令遍歷JavaScript數(shù)組錯誤的原因與相關解決技巧,需要的朋友可以參考下2017-01-01
AngularJS入門教程之 XMLHttpRequest實例講解
本文主要講解 AngularJS XMLHttpRequest,這里給大家整理相關資料并提供實例代碼,有需要的小伙伴參考下2016-07-07
本文主要講解 AngularJS REST和定制服務的知識，這里幫大家整理了相關知識，并附示例代碼，詳細講解了RES和定制服務的知識，有興趣的小伙伴可以參考下2016-08-08