那么打開(kāi)調(diào)試器，我們就能從dom節(jié)點(diǎn)上看清楚，router-outlet的嵌套關(guān)系：

目錄結(jié)構(gòu)

再看下src的目錄結(jié)構(gòu)，component文件夾是存放一些公共的組件，login和main組件是注冊(cè)的一級(jí)路由，home和另一個(gè)馬賽克組件是注冊(cè)為main的二級(jí)路由，實(shí)際后面會(huì)注冊(cè)很多組件到main下，但是他們的文件夾劃分都是同級(jí)。

使用hash路由

RouterModule.forRoot(routes, { useHash: true });使用hash路由，后端不用修改配置，這樣比較方便，省去很多麻煩

title

引入了platform-browser的Title，使用它的setTitle方法改標(biāo)題

APP_BASE_HREF

在非hash路由情況下，有時(shí)候環(huán)境的原因布置靜態(tài)資源路徑的時(shí)候可能不是根域名,同時(shí)還要?jiǎng)h除index.html的標(biāo)簽，否則會(huì)有問(wèn)題

import { APP_BASE_HREF } from '@angular/common';

在app.module里注冊(cè)providers: [{provide: APP_BASE_HREF, useValue: environment.publicBase}],

http

使用http相關(guān)API，需要注入HttpModule，否則會(huì)報(bào)錯(cuò): No provider for Http

import { HttpModule } from '@angular/http';

引入了三方JS，三方JS定義的全局變量，在引入到代碼里，編譯會(huì)報(bào)錯(cuò)：沒(méi)有定義。需要在前面加個(gè)申明declare let thirdVar:any;

規(guī)范

文件命名service，component，route，module，主要類(lèi)型的文件種類(lèi)不多，每次新建文件命名太長(zhǎng)，引入的時(shí)候也麻煩，所以除了根目錄命名保持xx.component.ts這種格式，其他文件統(tǒng)一為xx.c.ts，xx.s.ts。

xx.s.ts == xx.service.ts | export class xxS
xx.r.ts == xx.routes.ts | export class xxR
xx.m.ts == xx.module.ts | export class xxM
xx.c.ts == xx.component.ts | export class xxC

bootstrap4

考慮引入boostrap4來(lái)作為css庫(kù)布局。

關(guān)于rem，我們一般用rem作為單位的時(shí)候，是更希望利用它的特性改變font-size達(dá)到自適應(yīng)效果，會(huì)先定義一個(gè)font-size的范圍和對(duì)應(yīng)的屏幕寬度范圍，根據(jù)設(shè)計(jì)稿的寬度得到一個(gè)基數(shù)，再用設(shè)計(jì)稿中元素的實(shí)際像素去除以基數(shù)得到rem，最后根據(jù)屏幕寬度動(dòng)態(tài)設(shè)置font-size的相應(yīng)值達(dá)到自適應(yīng)效果。bootstrap4以瀏覽器字體默認(rèn)大小16px，直接定義了元素的rem值，它的源碼里沒(méi)有任何計(jì)算，我想他們是參照16px來(lái)設(shè)置的元素大小，然后求出的rem值，當(dāng)頁(yè)面根font-size的值是16px的時(shí)候，所有的bootstrap4的元素大小就是標(biāo)準(zhǔn)大小，如果我們想讓頁(yè)面的元素整體放大或者縮小，我們只需要去改變font-size的大小，font-size設(shè)置為多少，需要我們自己計(jì)算和定義規(guī)則。因?yàn)槭侨綆?kù)，所以這塊的實(shí)現(xiàn)方法和我們自己實(shí)際項(xiàng)目使用rem的時(shí)候，會(huì)有些反差。

如果項(xiàng)目中引入了它，我們給自定義元素直接設(shè)置px值的話，就會(huì)出現(xiàn)問(wèn)題，如果我們需要改變font-size的大小，就必須統(tǒng)一使用rem，否則font-size改變的時(shí)候，自定義的px元素并不會(huì)改變。那么自定義元素需要設(shè)置為rem值。

NG-ZORRO

想了想，需要快速開(kāi)發(fā)，還是需要一個(gè)UI插件庫(kù)，自己去造輪子開(kāi)發(fā)成本太高，經(jīng)擼哥介紹，知道了螞蟻金服的ng庫(kù)ng-zorro，支持ng4，https://ng.ant.design。 看了下很全，還提供了柵格布局和按鈕樣式，轉(zhuǎn)眼一想，如果用bootstrap4，相互之間可能有沖突，比如boostrap的reset相關(guān)的，而且用boot的按鈕樣式和螞蟻的樣式可能看起來(lái)不搭調(diào)。所以我在引入ng-zorro之后，先注釋了對(duì)bootstrap4的引用，一些公用樣式，后面可以考慮自己寫(xiě)。

部署打包

src目錄下有個(gè)environments文件夾，這里的文件是配置環(huán)境的，.angular-cli.json文件有配置兩個(gè)默認(rèn)環(huán)境，一個(gè)是開(kāi)發(fā)一個(gè)是發(fā)布環(huán)境，在我們開(kāi)發(fā)的時(shí)候，默認(rèn)選擇的是dev環(huán)境

在src下的main.ts里有這么一段代碼，這里的意思是切換到生產(chǎn)模式時(shí)禁用開(kāi)發(fā)環(huán)境下特有的檢查（雙重變更檢測(cè)周期）來(lái)讓?xiě)?yīng)用運(yùn)行得更快。

我們?cè)陂_(kāi)發(fā)項(xiàng)目的時(shí)候，也必然需要配置開(kāi)發(fā)，測(cè)試和生產(chǎn)環(huán)境，不同的環(huán)境的接口或者其他設(shè)置肯定是不一樣的。 我需要配置一個(gè)apiBase變量，代表不同環(huán)境的接口域名，在開(kāi)發(fā)的時(shí)候ng4會(huì)運(yùn)行ng serve在本地運(yùn)行一個(gè)服務(wù)，域名是localhost，那么后端部署的接口肯定不在我們這個(gè)開(kāi)發(fā)域名下，所以這個(gè) apiBase 就是我們后端接口的域名 apiBase='http://www.xxxx.com' （需要后端支持跨域）。 當(dāng)我們把打包好的代碼部署到QA或者生產(chǎn)環(huán)境后，訪問(wèn)前端頁(yè)面的url和后端接口都在同一域名，所以 apiBase='/' 。 那么dev和prod的environment代碼分別如下：

//dev
export const environment = {
 production: false,
 apiBase: 'http://www.xx.com/'
};

//prod
export const environment = {
 production: true,
 apiBase: '/'
};

angular-cli 創(chuàng)建的 environment.ts 里有一段注釋?zhuān)缦聢D。 意思是如果我們用 ng build 命令打包的時(shí)候，加上--env=prod(如果是自定義environment文件，必須是ng build --environment=xxx命令)，將會(huì)把 environment.ts 替代為 environment.prod.ts ，那么 main.ts 里的代碼 import { environment } from './environments/environment'; 實(shí)際變成了import { environment } from './environments/environment.prod'; 可以通過(guò)在 main.ts 打印日志查詢當(dāng)前環(huán)境變量是否是我們需要的

因此，我們就只需要把相應(yīng)的環(huán)境變量配置好，如下API接口的代碼和 main.ts 文件一樣，我引入了 environment，在開(kāi)發(fā)或者打包的時(shí)候，angular 配置的打包工具會(huì)自動(dòng)載入相應(yīng)的環(huán)境變量

結(jié)語(yǔ)

因?yàn)闃I(yè)務(wù)需求原因，太久沒(méi)真正學(xué)習(xí)搭建新框架了，心里也一直不踏實(shí)，感覺(jué)再不學(xué)點(diǎn)都跟不上時(shí)代了， 所以這次項(xiàng)目的機(jī)會(huì)也算是了卻自己一個(gè)心愿。 對(duì)比ng4和ng1，開(kāi)發(fā)模式有了很大的變化，給我的感覺(jué)就是ng4的模塊劃分更干凈，寫(xiě)法更舒服。 也可能是因?yàn)橛幸恍゛ngualr系列的基礎(chǔ)， 能力也應(yīng)該比前年學(xué)習(xí)ng1的時(shí)候更強(qiáng)，這次入門(mén)很快。 es6和typescript語(yǔ)法有時(shí)候分不清誰(shuí)是誰(shuí)，落后的知識(shí)趁著這次盡快補(bǔ)起來(lái)。 因?yàn)樾迈r感的原因，寫(xiě)代碼變得更有樂(lè)趣了，在頁(yè)面細(xì)節(jié)和動(dòng)畫(huà)上，稍微多搞了一點(diǎn)東西進(jìn)去（后臺(tái)項(xiàng)目沒(méi)有設(shè)計(jì)師，自由發(fā)揮）。轉(zhuǎn)眼3個(gè)多月沒(méi)寫(xiě)博客了，這之間學(xué)的新東西不多，但是回頭補(bǔ)了一下基礎(chǔ)的一些知識(shí)，也算是有很多收獲和新的理解。 設(shè)計(jì)模式的博客寫(xiě)了一部分，后面會(huì)抽時(shí)間一步步完成，是一篇希望大家都能看懂的博客，盡請(qǐng)期待！

PS：這篇博客不定期更新,更新的寫(xiě)到下面吧。

1. [ngClass]="item.fromAccount == webimS.userId ? 'me':'other'" ，ngClass可以這樣寫(xiě)，官網(wǎng)沒(méi)有這種示例
2. 按照縮寫(xiě)規(guī)則，指令directive我應(yīng)該寫(xiě)成xx.d.ts的，但是d.ts這個(gè)格式的文件似乎會(huì)被框架其他程序處理，就會(huì)報(bào)錯(cuò)，所以指令的命名我就沒(méi)用d.ts這樣的縮寫(xiě)了
3. 指令在父模塊declarations之后，發(fā)現(xiàn)在子模塊里使用指令，根本沒(méi)有反應(yīng)。折騰了很久，發(fā)現(xiàn)declarations申明的只在當(dāng)前模塊才能使用，而我的懶加載的子模塊無(wú)效，所以為指令定義一個(gè)獨(dú)立的module，在需要使用指令的地方import這個(gè)module，如下圖

在指令directive中要拿到當(dāng)前使用指令的dom，需要使用ViewContainerRef

import { Directive, EventEmitter, ViewContainerRef, AfterViewInit, OnDestroy} from '@angular/core';
constructor(public viewContainerRef: ViewContainerRef) { }

如果我們需要拿到當(dāng)前控制器下某個(gè)dom節(jié)點(diǎn)，需要使用@ViewChild

//compontent
@ViewChild('xxx')
 xxx: ElementRef;

getXXX(){
  console.log(this.xxx)
}

//html

表單驗(yàn)證指令封裝

ng提供表單驗(yàn)證 FormGroup 可以定義每個(gè)表單的驗(yàn)證條件，定義好之后，需要在表單下面寫(xiě)很多的ngIf dom來(lái)判斷和展示當(dāng)前表單的錯(cuò)誤填寫(xiě)提醒，這樣很不好的一點(diǎn)是提醒的文字是需要占位置的，在處理頁(yè)面的時(shí)候需要兼容這些提醒文案，給他們做兼容布局（如果表單全部是獨(dú)立的一排一排的還好，如果一行里有很多表單，每個(gè)表單的寬度可能也不一樣，這時(shí)提醒文案就不好放了），而且每次寫(xiě)那么多條件和dom真的很麻煩。

寫(xiě)了一個(gè)指令組件，提醒文案作為彈出層展示出來(lái)，把當(dāng)前表單的formControl對(duì)象傳入指令，把所有的條件統(tǒng)一文案，比如說(shuō)required 文案為‘'必填‘'。那需要做4件事情，1:動(dòng)態(tài)為指令里加入組件（參考了官網(wǎng)核心知識(shí)->模板與綁定->動(dòng)態(tài)組件），2:讓組件絕對(duì)定位到表單右上角，需要用一個(gè)div包裹一下表單，并獲取表單的寬度，把寬度傳給組件，組件給提示框設(shè)置絕對(duì)定位。3:傳入formControl對(duì)象，指令組件需要判斷顯示隱藏，4:統(tǒng)一文案，條件滿足后給顯示框展示對(duì)應(yīng)文案，因?yàn)閒ormControl的errors是一個(gè)對(duì)象，所以需要配置一個(gè)管道pipe來(lái)把errors轉(zhuǎn)換為對(duì)應(yīng)文案。

一個(gè)報(bào)錯(cuò)：

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: 'false'.

我寫(xiě)的每一個(gè)指令都會(huì)有這個(gè)報(bào)錯(cuò)，一般報(bào)錯(cuò)在數(shù)據(jù)變化后觸發(fā)，網(wǎng)上查了一下，說(shuō)是沒(méi)有使用 enableProdMode();方法就會(huì)觸發(fā)這個(gè)報(bào)錯(cuò)，在main.ts中判斷了環(huán)境，如果是開(kāi)發(fā)環(huán)境的話就不使用enableProdMode();方法，所以目前開(kāi)發(fā)環(huán)境會(huì)報(bào)錯(cuò)，但是也不影響邏輯，所以這個(gè)報(bào)錯(cuò)暫時(shí)忽略

formreset：

一個(gè)頁(yè)面可能會(huì)有一個(gè)彈窗來(lái)填寫(xiě)表單，填寫(xiě)的時(shí)候有兩種狀態(tài)，編輯和新增，但是都是用的同一個(gè)彈窗對(duì)象，表單做了驗(yàn)證、錯(cuò)誤條件達(dá)到并且dirty屬性為true的時(shí)候，就會(huì)展示錯(cuò)誤提醒。在新增和編輯切換的時(shí)候如果直接修改表單的值，dirty就會(huì)一直是true，就可能一直有錯(cuò)誤提示。所以需要在一定情況下使用 formGroup 的 reset來(lái)重置表單，dirty就會(huì)是false了。每個(gè)表單自己也有reset方法。當(dāng)使用formGroup重置表單的時(shí)候，textarea有可能并不會(huì)被重置，如果沒(méi)有被重置，需要單獨(dú)處理下textarea，給textarea的formControl對(duì)象單獨(dú)reset一下。

正式環(huán)境打包的檢查：

使用ng build --prod命令時(shí)，打包的檢查比較嚴(yán)格。開(kāi)發(fā)時(shí)候使用的private定義可以在模板里使用對(duì)象，在開(kāi)發(fā)環(huán)境就會(huì)報(bào)錯(cuò)。一些模板里綁定的對(duì)象數(shù)據(jù)，是需要后端返回了數(shù)據(jù)才會(huì)傳值給對(duì)象，在打包的時(shí)候就會(huì)檢測(cè)到當(dāng)前對(duì)象屬性不存在就無(wú)法通過(guò)，這時(shí)就不能用{{xxx.atrr}}這種形式輸出數(shù)據(jù)，得用{{xxx['attr']}}這種方式，才能跳過(guò)檢查。

某些情況使用this編譯會(huì)報(bào)錯(cuò)：

直接上圖，圖一會(huì)報(bào)錯(cuò)編譯無(wú)法通過(guò)，代碼邏輯是正確的。圖二能編譯通過(guò)

ng5出來(lái)后，我會(huì)把當(dāng)前項(xiàng)目升級(jí)，到時(shí)候項(xiàng)目也比較完善了，我會(huì)抽出核心部分，分享到github上，敬請(qǐng)期待。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。