共计 4805 个字符，预计需要花费 13 分钟才能阅读完成。
1、angular 的一些指令
(1)[class] 指令：前面是一个 JS 表达式，返回一个字符串示意为这个元素绑定哪个类, 图中如果 isTrue 为 true，则为这个 DIV 绑定类 class1，否则绑定类 class2。
留神：使用 [class] 指令后，本来绑定在 DIV 上的所有类包含 price 都会生效。
(2)[NgClass]指令：承受一个 JSON 对象，对象的 value 为 true 的 key 都会绑定到这个 DIV 下面去。[ngClass]、[ngStyle]、[class.A]、[style.B]指令都不会让原先在 DIV 上的 class 生效。
(3)[ngStyle]指令：接管一个 JSON 对象，对象的 key 为 CSS 属性，value 为 CSS 值。
(4)[class.class-name]指令: 当 isTrue 为 true 时，为 DIV 绑定一个 class
(5)[style.css-proper]指令：为 DIV 绑定一个款式
(6)*ngIf 指令：相当于 v -if(当为 false 时，间接删除，而不是设置 display:none)
(7)*ngFor 指令：与 v -for 相似，除了 index, 还有 even/odd/first/last。
ngFor 有个改善性能的选项：trackBy, 个别状况 Angular 辨认 ngFor 中的元素靠的是对象的援用，而通过 trackBy 能够指定 Angular 依据什么来辨认元素，（如从新加载服务器的数据，会进行不必要的删除和创立）。trackBy 承受两个参数 index,item, 返回的内容就是 Angular 进行元素辨认的内容。
(8)[ngSwitch]指定：外部蕴含ngSwitchCase（若匹配则渲染，并移出同级元素）和ngSwitchDefault（如果与下面的几个都不匹配，则执行这个）两个指令
2、组件
(1) 装璜器 Component, 与组件发明无关
①selector:
1) 如果是’app-stock-item’用 <app-stock-item></app-stock-item> 调用。
2)如果是’.app-stock-item’用 CSS 类的模式 <div class=”app-stock-item”></div> 调用。
3)如果是’[app-stock-item]’用元素属性的模式调用 <div app-stock-item></div>
②templateUrl：承受一个相对路径的 HTML, 也能够用 template 间接指应用内联模板。（只能二选一）
③styleUrls: 承受一个相对路径的 CSS 的数组，也能够用 style 间接应用内联 CSS。（只能二选一）
④encapsulation: 设置组件用到的款式的作用范畴
1)ViewEncapsulation.Emulate 默认值，款式只利用于组件中
2)ViewEncapsulation.None 款式将作用于全局
⑤changeDetection: 变动感知，
1)changeDetectionStrategy.Default: 默认值
2)changeDetectionStrategy.OnPush：子组件用 @Onput 装璜的属性，承受的父元素的对象，在扭转援用的状况下，会去更新子组件视图，只是扭转父元素的对象中的字段值不会去更新子组件的视图。（但理论模型也更新）
(2) 装璜器 NgModule, 与组件连贯到模块无关
①declaration：确保组件和指令能够在模块范畴内应用，是一个数组，会蕴含这个组件使用到的所有组件模块（每一个都是一个类）。
②imports: 容许你指定想要导入并在模块中拜访的模块。
(3) 装璜器 Input，能够将父组件的数据传给子组件。
子组件：应用 @Input 承受父组件模板中给子组件绑定的属性的值（图中就是父组件将 stockObj 对象传到子组件的 stock 对象中）
父组件：
父组件模板：
(4)装璜器 Output, 能够注册和监听来自子组件的事件
子组件中应用 @Output 定义一个能够将事件传给父组件的事件发生器。
父组件模板绑定了子组件的 @Output 定义的事件发生器变量，同时绑定监听函数，应用 $event 参数能力收到子组件传来的数据。不然只会触发函数，收不到数据。
父组件中增加一个监听函数，监听函数的数据就是子组件中传给父组件的数据。
3、Angular 生命周期接口
(1)OnChanges: 当被绑定输出属性的值发生变化时触发（父子传值时会触发）
(2)OnInit: 组件的初始化钩子，是从服务器加载数据的现实机会
(3)OnDoCheck: 用于自定义的办法，用于检测和解决值的扭转
(4)AfterContentInit: 在组件投影后触发（将父组件上的一段 HTML 放在子组件中，相似于 VUE 的插槽），若没有投影则间接触发
(5)AfterContentChecked: 组件每次查看内容时调用
(6)AfterViewInit: 组件的所有间接子组件的视图初始化和视图更新后调用
(7)AfterViewChecked: 组件的所有子视图查看并更新后触发
(8)OnDestroy: 组件销毁时触发
4、视图投影：将父组件的一段 HTML 放在子组件上
父组件中在调用的子组件外部搁置一些 HTML
子组件模板中应用 ng-content 标签, 父组件会将内容投影到这个标签中
5、Angular 模块驱动表单：易读性比拟好，申明性较强
(1) 数据双向绑定：和 V -model 一样，对属性进行单向数据绑定后，进行事件监听。
应用 ngModel 指令能够简化，name 字段是必须的，
或者：定制性更好。
(2)在表单中能够有模板援用变量，应用 #, 前面的变量就能够长期取得 DOM 元素或者某个指令上面的类或者值，而后将其传到函数中。
6、Angular 响应式表单：能够齐全管制从 UI 到模型的同步形式和同步工夫
(1) 表单组：
在组件中实例化了一个 FormGroup 公共变量, 传入一个实例化了多个控件的对象。FormControl 承受两个参数，第一个是默认值，第二个是验证器或验证器数组。
在组件模板中 <form> 用 [formGroup] 绑定之前 FormGroup 实例化的公共变量。
在 <form> 外部的表单元素的 formControlName 属性绑定公共变量的字段名。
(2)表单构建器：是一种语法糖。更加简便
(3) 表单验证：在组件模板中用 ngIf 来显示或暗藏验证信息
7、Angular 构建服务
装璜器 @Injectable: 对 Angular 依赖注入零碎的一个标记。个别应用服务时举荐加上。
(1)执行命令 ng g service services/stock –module=app 主动构建服务并在 app.module.ts 或组件中增加这个服务
①如果是在 app.module.ts 中增加，则变成一个全局服务实例，所有的组件都能够调用这个服务，并共享数据
②如果是在组件中增加这个服务，那么它会再发明一个服务实例，它以及它的所有子组件都应用这个服务实例。（如果有全局的这个服务实例也间接忽视掉）
(2) 在本人创立的 server 类中定义函数逻辑
(3) 在组件中引入该服务
(4) 在组件的构造函数中注册
(5) 在组件函数中调用服务（留神：调用的服务返回的是援用，一个组件中批改了这个援用，其余用到这个援用的组件也会发生变化。所以不要轻易批改）
8、Angular 使用 Observable:
(1)在须要的中央导入 Observable 操作符
(2) 如果应用服务，在服务中能够返回一个 Observable
(3)在组件中接管这个 Observable
(4)能够在组件模板中应用ngFor 配合管道操作符显示 Observable 中的数据，提供一个 async 管道后就容许ngFor 绑定一个 Observable。
9、Angular 拦截器：对所有收回和收到的 HTTP 报文进行拦挡、验证和批改。（例如应用了认证 token, 就能够通过增加 header 的形式来批改所有收回的 HTTP 申请）
留神：HttpRequset 和 HttpResponse 对象都是不可变对象，设置申请字段时，须要应用非凡办法：
(1)本人手动创立一个 stock-app.interceptor.ts 文件（拦截器文件）并实现 HttpInterceptor 接口。intercept 办法有 HttpRequest 和 HttpHandler 两个参数。能够调用 HttpHandler 持续将申请传给下一个拦截器
①较简略的拦截器
②较简单的拦截器
(2)在 App.module.ts 中增加这个拦截器
10、Angular 应用路由
(1) 应用 ng generate module app-routes –flat –module=app 指令主动生成一个 app-routes.module.ts 文件，并主动注册到 app.module.ts 中
(2) 在 app-routes.module.ts 文件中编辑路由
路由的排序对展示组件也有很大关系（后面的先匹配到就间接展现，疏忽前面的）
(3)在 app.component.html 中利用路由
11、Angular 常见的路由需要
(1) 路由中的参数的获取：
①在组件中导入以后路由：ActivatedRoute，并在构造函数中实例化
②在路由对象中设置指定参数
③在组件中应用 this.route.snapshot.paramMap.get(‘code’); 来取得上一步在路由对象中设置的参数。
(2)路由跳转：
①在组件中导入路由对象：Router, 并在构造函数中实例化
②在组件中利用 Router 进行跳转
navigate 办法承受一个 commands 数组参数，将这些 commands 解析成路由的各个组成部分，会变成一个相对的 URL, 例如 router.navigate([‘stocks’,’list’])就会导航到 stocks/list 路由。
当不给 commands 指定参数时，即 router.navigate([],{…})：会保留在以后页面，能够在 {…} 中扭转查问参数。
也能够通过在构造函数中注入以后路由：ActivatedRoute 来指定一个绝对路由：返回上一级：router.navigate([‘../’],{relativeTo: this.route})
(3)路由可选参数：router.navigate 数组中的对象如果有 queryParams 对象，将会把这个对象的健值转化为查问路由中的参数
(4)路由爱护
①仅受权可用路由：
1) 创立一个实现 CanActivate 接口的类 AuthGuard：ng g guard guards/auth
实现了 Canactivate 办法：通过 UserStoreService 服务检查用户是否曾经登入，而后返回一个布尔值。也能够返回一个 Observable 或 Promise(通过询问服务器是否导航该路由)
2)在 app.module.ts 中注册该服务
3) 在 app-routes.module.ts 中应用 AuthGuard 服务
②避免卸载：用于用户无意间点到表单页面导航而跳转页面，失落数据。（只对用户点击路由连贯有用，点击页面外或间接批改 URL 则有效）
1) 发明实现一个 CanDeactivate 接口的类 DeactivateGuard：ng g guard guards/Deactivate
2)在 app.module.ts 中应用 DeactivateGuard 服务。
3)在 app-routes.module.ts 中应用这个这个服务
③用 Resolver 提前加载数据
1) 创立一个 StockLoadResolverService 类，实现 Resolve<Stock> 接口
2) 在 app.module.ts 中注册这个服务
3) 在 app-routes.module.ts 中应用这个服务。resolve 为一个对象，对象的每个健都是 key 都是预加载的数据名，而 value 就是他的值
4) 在对应组件中应用这个预加载的数据
