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)在对应组件中应用这个预加载的数据