目錄
六、Angular之constructor和ngOnInit差異及適用場景
現在接觸的技術棧是Angular，從零開始，點滴積累，努力提升。
一、@ViewChild
https://www.jianshu.com/p/ac5366abfa74
providers: [ ChildService ]
在上面的子組件裏面provider裏面提供了一個ChildService類。我們也是可以通過@ViewChild來拿到這個ChildService類的。代碼如下
@ViewChild(ChildService) childService: ChildService;
項目中有個功能是修改密碼，將修改密碼這個模態框封裝爲一個組件，嵌入在主頁面中，那麼在主頁面中是這樣引入的：
<modify-password #modifyPwd></modify-password>
修改密碼所觸發的方法：<li nz-menu-item (click)="modifyPassword()">修改密碼</li>
在ts文件中是這樣引入的：@ViewChild('modifyPwd', {static: false}) modifyPwd;
這樣調用的：
modifyPassword() {
// 修改密碼
this.modifyPwd.show();
}
而在修改密碼模態框的ts文件中show方法是這樣的：
show() {
this.oldPassword = '';
this.newPassword = '';
this.repeatPassword = '';
this.isVisible = true;
}
二、獲取路由參數
this.route.queryParams.subscribe(queryParams => {
let productId = queryParams.productId;
let title = queryParams.title;
});
三、loadChildren
在看代碼的過程中，發現路由有這樣兩種表現形式：
loadChildren是延遲加載子模塊,這對於加載頁面的性能有很好的提升。通俗的講就是說進入主模塊的時候,子模塊不加載,等需要進入子模塊的時候才加載。項目劃分模塊的時候,使用loadChildren配置路由是最佳選擇方案。
因此當訪問子模塊的時候，就回去找相應目錄下export的模塊。
四、Angular請求另一服務的API（請求代理）
看代碼的時候，想知道前端是如何向服務端發送請求的，結果找service文件沒發現有請求地址。請教之後，知道使用了代理。直接創建一個proxy.conf.json文件，定義所有/api的請求重定向到http://api.yourdomai.com。
而在angular.json文件中，angular-cli已經有這個命令了，在我們啓動項目的時候，會請求這個代理，而我們在寫代碼的時候，直接在相應的文件中，寫請求接口後面的部分就好了。
五、angular路由
https://angular.cn/guide/router#milestone-6-asynchronous-routing
大多數帶路由的應用都要在index.html的 <head> 標籤下先添加一個 <base> 元素，來告訴路由器該如何合成導航用的 URL。
路由器需要先配置纔會有路由信息。並用 RouterModule.forRoot() 方法來配置路由器， 並把它的返回值添加到 AppModule 的 imports 數組中。
這裏的路由數組 appRoutes 描述如何進行導航。 把它傳給 RouterModule.forRoot() 方法並傳給本模塊的 imports 數組就可以配置路由器。
RouterOutlet 是一個來自路由模塊中的指令，它的用法類似於組件。 它扮演一個佔位符的角色，用於在模板中標出一個位置，路由器將會把要顯示在這個出口處的組件顯示在這裏。
<router-outlet></router-outlet>
<a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
路由守衛：https://www.cnblogs.com/starof/p/9012193.html
六、Angular之constructor和ngOnInit差異及適用場景
constructor和OnInit的執行時間不同，constructor是類初始化的時候，而OnInit在組件初始化的時候，有的屬性在OnInit可以訪問到但是在constructor訪問不到，OnInit是組件的生命週期函數，比constructor慢，業務邏輯放OnInit。
https://blog.csdn.net/u010730126/article/details/64486997/
七、表單中的數據流
https://blog.csdn.net/sfx_ss/article/details/89278096
https://angular.cn/guide/forms-overview
1、響應式表單中的數據流
下面這些步驟列出了 "從視圖到模型" 數據流的梗概。
-
最終用戶在輸入框元素中鍵入了一個值，這裏是 "Blue"。
-
這個輸入框元素會發出一個帶有最新值的 "input" 事件。
-
這個控件值訪問器
ControlValueAccessor會監聽表單輸入框元素上的事件，並立即把新值傳給FormControl實例。 -
FormControl實例會通過valueChanges這個可觀察對象發出這個新值。 -
valueChanges的任何一個訂閱者都會收到這個新值。下面這些步驟列出了從模型到視圖的數據流的梗概。
-
favoriteColorControl.setValue()方法被調用，它會更新這個FormControl的值。 -
FormControl實例會通過valueChanges這個可觀察對象發出新值。 -
valueChanges的任何訂閱者都會收到這個新值。 -
該表單輸入框元素上的控件值訪問器會把控件更新爲這個新值。
2、模板驅動表單中的數據流
下面這些步驟列出了當輸入框的值從 Red 變成 Blue 時 "從視圖到模型" 的數據流概況。
-
最終用戶在輸入框元素中敲 "Blue"。
-
該輸入框元素會發出一個 "input" 事件，帶着值 "Blue"。
-
附着在該輸入框上的控件值訪問器會觸發
FormControl實例上的setValue()方法。 -
FormControl實例通過valueChanges這個可觀察對象發出新值。 -
valueChanges的任何訂閱者都會收到新值。 -
控件值訪問器
ControlValueAccessory還會調用NgModel.viewToModelUpdate()方法，它會發出一個ngModelChange事件。 -
由於該組件模板雙向數據綁定到了
favoriteColor，組件中的favoriteColor屬性就會修改爲ngModelChange事件所發出的值（"Blue"）。下面這些步驟列出了當
favoriteColor從 Blue 變爲 Red 時，"從模型到視圖" 的數據流概況。
- 組件中修改了
favoriteColor的值。 - 變更檢測開始。
- 在變更檢測期間，由於這些輸入框之一的值發生了變化，Angular 就會調用
NgModel指令上的ngOnChanges生命週期鉤子。 ngOnChanges()方法會把一個異步任務排入隊列，以設置內部FormControl實例的值。- 變更檢測完成。
- 在下一個檢測週期，用來爲
FormControl實例賦值的任務就會執行。 FormControl實例通過可觀察對象valueChanges發出最新值。valueChanges的任何訂閱者都會收到這個新值。- 控件值訪問器
ControlValueAccessor會使用favoriteColor的最新值來修改表單的輸入框元素。
八、用命令新建組件或相關文件
在 Angular 中，最好在一個獨立的頂級模塊中加載和配置路由器，它專注於路由功能，然後由根模塊 AppModule 導入它。
按照慣例，這個模塊類的名字叫做 AppRoutingModule，並且位於 src/app 下的 app-routing.module.ts 文件中。
使用 CLI 生成它。
ng generate module app-routing --flat --module=app
--flat 把這個文件放進了 src/app 中，而不是單獨的目錄中。--module=app 告訴 CLI 把它註冊到 AppModule 的 imports 數組中。
// 創建服務文件
ng generate service message
// 創建組件
ng generate component messages
九、通過命令創建組件報錯
通過ng generate component tableTest創建組件的時候，報錯如下：
原因是，我的目錄裏面有兩個xx.module.ts文件，分別是pipe.module.ts和app.module.ts兩個文件，此時需要指定創建的組件的聲明需要添加到哪個文件裏面。
ng generate component shared/example --module=app.module.ts