Angular2.x学习笔记

--------------------------------------基础部分------------------------------------------
在进行数据更改时,注意对象传递的是地址,在改动数据后,即使取消了,也会影响这个对象,应该使用对象的深拷贝对象

数据渲染/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

动态component:
https://angular.io/guide/dynamic-component-loader

http拦截器:
https://angular.io/guide/http#intercepting-requests-and-responses
https://blog.51cto.com/13934921/2467421
添加公共params,错误处理等

共享模块:
https://angular.io/guide/sharing-ngmodules

优化:
https://blog.csdn.net/itest_2016/article/details/80048398
https://github.com/angular/angular-cli/issues/11915
https://github.com/angular/angular-cli/issues/6868
https://github.com/angular/angular-cli/wiki/build

猜你喜欢

转载自blog.51cto.com/13934921/2494944