Angular2.x學習筆記

原創

2020-05-14 13:09

--------------------------------------基礎部分------------------------------------------
在進行數據更改時，注意對象傳遞的是地址，在改動數據後，即使取消了，也會影響這個對象，應該使用對象的深拷貝對象

數據渲染/component/pipes/directive/component通信等：
https://angular.io/guide/displaying-data
其中要注意component styles的encapsulation/:host/:host-context/ ::ng-deep等
encapsulation: ViewEncapsulation.None 會打破style的scope，將style加入到全局的style中並且:host 會失效
::ng-deep 如果沒有加:host 則會從root開始，如果加了:host 則從當前component開始
但是使用ng-zorro的modal時，脫離了文檔，需要單獨使用::ng-deep進行覆蓋不能用:host

如果使用了外部的css，記住要在angular.json中進行申明
https://blog.51cto.com/13934921/2490808

component通信的三種方式，其中使用@Input() 的時候，如果值是動態改變的，應該使用setter 和 getter
注意：如果input的是一個對象，setter是不會進行深拷貝監聽的，也就是說對象的某個值改了並不會觸發setter
如果更改了一些值，最後取消，再次打開會出現數據已經更改的情況，這就是因爲setter沒有觸發，因爲原始值沒有改動，使用的是上一次的狀態和數據

表單和事件：
https://angular.io/guide/forms-overview
https://blog.51cto.com/13934921/2470919
template form 目前不支持數字的max和min屬性，需要改用relative form

模塊：
https://angular.io/guide/ngmodules

services：
https://angular.io/guide/singleton-services
https://angular.io/guide/providers
https://angular.io/guide/http
https://angular.io/tutorial/toh-pt4
https://angular.io/tutorial/toh-pt6
可以繼承，考慮一個baseService裏面有通用的方法

http：
https://angular.io/guide/http
這個裏面要注意管道操作RxJs/錯誤處理，默認是application/json, 用new FormData()可以發送form-data數據

RxJs：
https://angular.io/guide/observables
管道操作，mergeMap等

路由：
https://angular.io/guide/router

html/url字符安全：
https://angular.io/guide/security

一些配置：
https://angular.io/guide/file-structure
https://blog.51cto.com/13934921/category4.html

多語言：
https://github.com/ngx-translate/core
https://github.com/ngx-translate/http-loader

規範：
https://angular.io/guide/styleguide

--------------------------------------進階部分------------------------------------------
啓動init：
https://blog.51cto.com/13934921/2467476

生命週期：
https://angular.io/guide/lifecycle-hooks