Angular基础

蓝天不澜

1、angular的一些指令
(1)[class]指令:后面是一个JS表达式,返回一个字符串表示为这个元素绑定哪个类,图中如果isTrue为true,则为这个DIV绑定类class1,否则绑定类class2。
注意:运用[class]指令后,原本绑定在DIV上的所有类包括price都会失效。
image.png
(2)[NgClass]指令:接受一个JSON对象,对象的value为true的key都会绑定到这个DIV上面去。[ngClass]、[ngStyle]、[class.A]、[style.B]指令都不会让原先在DIV上的class失效。

image.png

image.png
(3)[ngStyle]指令:接收一个JSON对象,对象的key为CSS属性,value为CSS值。
(4)[class.class-name]指令: 当isTrue为true时,为DIV绑定一个class
image.png
(5)[style.css-proper]指令: 为DIV绑定一个样式
(6)*ngIf指令:相当于v-if(当为false时,直接删除,而不是设置display:none)
image.png
(7)*ngFor指令:与v-for类似,除了index,还有even/odd/first/last。
ngFor有个改善性能的选项:trackBy, 一般情况Angular识别ngFor中的元素靠的是对象的引用,而通过trackBy可以指定Angular根据什么来识别元素,(如重新加载服务器的数据,会进行不必要的删除和创建)。trackBy接受两个参数 index,item,返回的内容就是Angular进行元素识别的内容。

image.png

image.png
(8)[ngSwitch]指定:内部包含ngSwitchCase(若匹配则渲染,并移出同级元素)和ngSwitchDefault(如果与上面的几个都不匹配,则执行这个)两个指令
image.png

2、组件
(1)装饰器Component,与组件创造有关
image.png
①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, 与组件连接到模块有关
image.png
①declaration:确保组件和指令可以在模块范围内使用,是一个数组,会包含这个组件运用到的所有组件模块(每一个都是一个类)。
②imports: 允许你指定想要导入并在模块中访问的模块。
(3)装饰器Input,可以将父组件的数据传给子组件。
子组件:使用@Input接受父组件模板中给子组件绑定的属性的值(图中就是父组件将stockObj对象传到子组件的stock对象中)
image.png
父组件:
image.png
父组件模板:
image.png
(4)装饰器Output, 可以注册和监听来自子组件的事件
子组件中使用@Output 定义一个可以将事件传给父组件的事件发生器。
image.png
父组件模板绑定了子组件的@Output定义的事件发生器变量,同时绑定监听函数,使用$event参数才能收到子组件传来的数据。不然只会触发函数,收不到数据。
image.png
父组件中添加一个监听函数,监听函数的数据就是子组件中传给父组件的数据。
image.png

3、Angular生命周期接口
(1)OnChanges: 当被绑定输入属性的值发生变化时触发(父子传值时会触发)
(2)OnInit: 组件的初始化钩子,是从服务器加载数据的理想时机
(3)OnDoCheck: 用于自定义的方法,用于检测和处理值的改变
(4)AfterContentInit: 在组件投影后触发(将父组件上的一段HTML放在子组件中,类似于VUE的插槽),若没有投影则直接触发
(5)AfterContentChecked: 组件每次检查内容时调用
(6)AfterViewInit: 组件的所有直接子组件的视图初始化和视图更新后调用
(7)AfterViewChecked: 组件的所有子视图检查并更新后触发
(8)OnDestroy: 组件销毁时触发

4、视图投影: 将父组件的一段HTML放在子组件上
父组件中在调用的子组件内部放置一些HTML
image.png
子组件模板中使用ng-content标签,父组件会将内容投影到这个标签中
image.png

5、Angular模块驱动表单:易读性比较好,声明性较强
(1)数据双向绑定:和V-model一样,对属性进行单向数据绑定后,进行事件监听。
image.png
使用ngModel指令可以简化,name字段是必须的,
image.png
或者:定制性更好。
image.png
(2)在表单中可以有模板引用变量,使用#,后面的变量就可以临时获得DOM元素或者某个指令下面的类或者值,然后将其传到函数中。
image.png

6、Angular响应式表单:可以完全控制从UI到模型的同步方式和同步时间
(1)表单组:
在组件中实例化了一个FormGroup公共变量, 传入一个实例化了多个控件的对象。FormControl接受两个参数,第一个是默认值,第二个是验证器或验证器数组。
image.png
在组件模板中<form>用[formGroup]绑定之前FormGroup实例化的公共变量。
在<form>内部的表单元素的formControlName属性绑定公共变量的字段名。
image.png

(2)表单构建器: 是一种语法糖。更加简便
image.png
(3)表单验证:在组件模板中用ngIf来显示或隐藏验证信息
image.png

image.png

7、Angular构建服务
装饰器 @Injectable: 对Angular依赖注入系统的一个标志。一般使用服务时推荐加上。

(1)执行命令 ng g service services/stock --module=app自动构建服务并在app.module.ts或组件中添加这个服务
①如果是在app.module.ts中添加,则变成一个全局服务实例,所有的组件都可以调用这个服务,并共享数据
②如果是在组件中添加这个服务,那么它会再创造一个服务实例,它以及它的所有子组件都使用这个服务实例。(如果有全局的这个服务实例也直接无视掉)
image.png
(2)在自己创建的server类中定义函数逻辑
image.png
(3)在组件中引入该服务
image.png
(4)在组件的构造函数中注册
image.png
(5)在组件函数中调用服务(注意:调用的服务返回的是引用,一个组件中修改了这个引用,其他用到这个引用的组件也会发生变化。所以不要随便修改)
image.png

8、Angular运用Observable:
(1)在需要的地方导入Observable操作符
image.png
(2)如果使用服务,在服务中可以返回一个Observable
image.png
(3)在组件中接收这个Observable
image.png
(4)可以在组件模板中使用ngFor配合管道操作符显示Observable中的数据,提供一个async管道后就允许ngFor绑定一个Observable。
image.png

9、Angular拦截器:对所有发出和收到的HTTP报文进行拦截、验证和修改。(例如使用了认证token,就可以通过添加header的方式来修改所有发出的HTTP请求)
注意: HttpRequset 和 HttpResponse对象都是不可变对象,设置请求字段时,需要使用特殊方法:
image.png
(1)自己手动创建一个stock-app.interceptor.ts文件(拦截器文件)并实现HttpInterceptor接口。intercept方法有HttpRequest和HttpHandler两个参数。可以调用HttpHandler继续将请求传给下一个拦截器
①较简单的拦截器
image.png
②较复杂的拦截器
image.png

(2)在App.module.ts中添加这个拦截器
image.png

10、Angular使用路由
(1)使用ng generate module app-routes --flat --module=app指令自动生成一个app-routes.module.ts文件,并自动注册到app.module.ts中
image.png
(2)在app-routes.module.ts文件中编辑路由
路由的排序对展现组件也有很大关系(前面的先匹配到就直接展示,忽略后面的)
image.png
(3)在app.component.html中应用路由
image.png

11、Angular常见的路由需求
(1)路由中的参数的获取:
①在组件中导入当前路由:ActivatedRoute,并在构造函数中实例化
image.png

image.png

image.png

②在路由对象中设置指定参数

③在组件中使用this.route.snapshot.paramMap.get(‘code’);来获得上一步在路由对象中设置的参数。
(2)路由跳转:
①在组件中导入路由对象:Router, 并在构造函数中实例化
image.png

image.png

②在组件中利用Router进行跳转
image.png

navigate方法接受一个commands数组参数,将这些commands解析成路由的各个组成部分,会变成一个绝对的URL, 例如router.navigate([‘stocks’,’list’])就会导航到stocks/list路由。
当不给commands指定参数时,即router.navigate([],{...}):会保留在当前页面,可以在{...}中改变查询参数。
也可以通过在构造函数中注入当前路由:ActivatedRoute来指定一个相对路由:返回上一级:router.navigate([‘../’],{relativeTo: this.route})

(3)路由可选参数:router.navigate数组中的对象如果有queryParams对象,将会把这个对象的健值转化为查询路由中的参数
image.png

image.png

(4)路由保护
①仅授权可用路由:
1)创建一个实现CanActivate接口的类AuthGuard: ng g guard guards/auth
实现了Canactivate方法:通过UserStoreService服务检查用户是否已经登入,然后返回一个布尔值。也可以返回一个Observable或Promise(通过询问服务器是否导航该路由)
image.png
2)在app.module.ts中注册该服务
image.png
3)在app-routes.module.ts中使用AuthGuard服务
image.png
②防止卸载:用于用户无意间点到表单页面导航而跳转页面,丢失数据。(只对用户点击路由连接有用,点击页面外或直接修改URL则无效)
1)创造实现一个CanDeactivate接口的类DeactivateGuard: ng g guard guards/Deactivate
image.png
2)在app.module.ts中使用DeactivateGuard服务。
image.png
3)在app-routes.module.ts中使用这个这个服务
image.png
③用Resolver提前加载数据
1)创建一个StockLoadResolverService类,实现Resolve<Stock>接口
image.png
2)在app.module.ts中注册这个服务
image.png
3)在app-routes.module.ts中使用这个服务。resolve为一个对象,对象的每个健都是key都是预加载的数据名,而value就是他的值
image.png
4)在对应组件中使用这个预加载的数据
image.png

阅读 578
0 声望
0 粉丝
0 条评论
0 声望
0 粉丝
文章目录
宣传栏