Angular使用cli生成自定義文件、組件的方法
不得不說，和傳統(tǒng)的復(fù)制黏貼來創(chuàng)建組件的方法相比，使用angular-cli的腳手架功能來創(chuàng)建模塊、組件顯得非常高效，不僅僅有了創(chuàng)建了文件，還包含了一些必須的代碼，同時(shí)也將組件導(dǎo)入了最近的模塊，一些重復(fù)性工作就使用cli可以節(jié)省掉。angular提供了豐富的文件類型，但是總歸是有些我們自己的項(xiàng)目需要，我們需要?jiǎng)?chuàng)建自定義后綴的組件，這時(shí)候就不得不舍棄cli了，那么能不能使用自定義的方式來達(dá)到腳手架創(chuàng)建呢？
angular 腳手架創(chuàng)建的方式
我們首先來看看angular-cli提供的一些命令是怎么創(chuàng)建文件的。
看angular文檔我們可以看到這個(gè)詞：Schematic，這個(gè)詞意為原理圖。Schematic是一個(gè)腳手架庫，定義如何通過創(chuàng)建、修改、重構(gòu)或移動(dòng)文件和代碼來生成或轉(zhuǎn)換編程項(xiàng)目。Angular Cli使用原理圖生成和修改項(xiàng)目文件。庫開發(fā)人員可以創(chuàng)建原理圖，使Cli能夠生成其已發(fā)布的庫?？梢圆榭?a target="_blank" rel="external nofollow" >https://www.npmjs.com/package/@angular-devkit/schematics。
那這樣的話，我們可以知道angular是借助的Schematic來生成項(xiàng)目文件。再查看發(fā)現(xiàn)node_module里面有個(gè)@Schematics/angular，里面定義了我們可以使用cli生成的所有文件，包括components\class\enum\interface等等。
點(diǎn)開查看components，里面有一些ts文件，還有一個(gè)files文件夾，里面包含著所有我們生成component的文件：
__name@dasherize@if-flat__
- __name@dasherize__.component.__styleext__
- __name@dasherize__.component.html
- __name@dasherize__.component.spec.ts
- __name@dasherize__.component.ts
那想想，在我們運(yùn)行Cli創(chuàng)建組件的時(shí)候，會(huì)使用這里的模板，用file文件夾里面的文件生成項(xiàng)目組件。其他的先不管，我們按照這里的components是不是可以來構(gòu)造我們自己的“原理圖”呢？
自定義原理圖
先看看我們的需求，我們現(xiàn)在項(xiàng)目的項(xiàng)目里面，頁面是page，按照angular原來的寫法，所有的page的組件都是：XXXX.component.ts。我們?yōu)榱藢㈨撁婧徒M件進(jìn)行區(qū)分，頁面的文件都是XXX.page.ts。我們先在node_module/@Schematics/angula/下面復(fù)制component新建一個(gè)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 命令運(yùn)行時(shí)會(huì)執(zhí)行這個(gè)js文件
- schema.d.ts
- schema.json 定義了這個(gè)生成器命令可以接受的參數(shù)
接下來再看page里面的index.js，這個(gè)js文件在我們跑自己的命令的時(shí)候會(huì)執(zhí)行。看這個(gè)文件，里面的代碼雖然有點(diǎn)看不懂，但是猜猜還是可以的，有些關(guān)鍵地方：
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)建對(duì)應(yī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() {
}
}
這個(gè)是生成的組件的ts模板，我們需要根據(jù)我們的需求來改造，首先是文件里面的類，既然我們現(xiàn)在的文件名是XXX.page.ts，那么里面的類也就需要時(shí)XXXPage形式的，并且我們的頁面是不允許作為指令的形式出現(xiàn)的，所以也要去掉selector元數(shù)據(jù)。那綜合下來，我們的__name@dasherize__.page.ts應(yīng)該修改為：
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)在來嘗試著生成一個(gè)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)在項(xiàng)目中使用的是less，而且使用component創(chuàng)建的組件里面的樣式文件都是less，為啥我們自定義的生成的是css文件？？？
很可能是沒有識(shí)別我們自定義的less，那我們自定義的less是怎么定的呢？看看angular.json文件中有個(gè)project里面：
"schematics": {
"@schematics/angular:component": {
"styleext": "less"
}
},
也就是說，我們?cè)谶@里配置了生成component組件時(shí)，styleext為less，我們的page命令是沒有配置的，所以會(huì)找默認(rèn)的樣式文件后綴。那我們?cè)谶@里嘗試加上試試看：
"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)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Angular 多模塊項(xiàng)目構(gòu)建過程，本文大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-02-02
AngularJS實(shí)現(xiàn)頁面跳轉(zhuǎn)后自動(dòng)彈出對(duì)話框?qū)嵗a
這篇文章主要介紹了AngularJS實(shí)現(xiàn)頁面跳轉(zhuǎn)后自動(dòng)彈出對(duì)話框?qū)嵗a，然后在文章下面給大家介紹了angularjs頁面加載后自動(dòng)彈窗的實(shí)例代碼，感興趣的朋友參考下吧2017-08-08
這篇文章主要為大家介紹了詳解如何在Angular中引入Mock.js實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
Angular利用內(nèi)容投射向組件輸入ngForOf模板的方法
本篇文章主要介紹了Angular利用內(nèi)容投射向組件輸入ngForOf模板的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
AngularJS修改model值時(shí),顯示內(nèi)容不變的實(shí)例
今天小編就為大家分享一篇AngularJS修改model值時(shí),顯示內(nèi)容不變的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
詳解基于Angular4+ server render(服務(wù)端渲染)開發(fā)教程
本篇文章主要介紹了詳解基于Angular4+ server render(服務(wù)端渲染)開發(fā)教程 ，具有一定的參考價(jià)值，有興趣的可以了解一下2017-08-08
Angular.js與node.js項(xiàng)目里用cookie校驗(yàn)賬戶登錄詳解
這篇文章主要介紹了Angular.js與node.js項(xiàng)目里用cookie校驗(yàn)賬戶登錄的相關(guān)資料，文中介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧。2017-02-02
今天小編就為大家分享一篇關(guān)于Angular6新特性之Angular Material，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧2018-12-12
本文通過示例給大家詳解angularjs 的filter知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-03-03
angular.js指令中的controller、compile與link函數(shù)的不同之處
最近一位大神問了我angular.js指令中的controller、compile與link函數(shù)的不同，想了想居然回答不出來，所以必須要深入的探究下，下面這篇文章主要介紹了關(guān)于angular.js指令中的controller、compile與link函數(shù)的不同之處，需要的朋友可以參考下。2017-05-05