Angular7学习之路-2019/7/5

一：angular7中配置关系

　　1.路由:

　　　　　主路由:app-routing.module.ts

　　　　　　　　{

　　　　　　　　　　path: 'classified-protection',

　　　　　　　　　　loadChildren: './classified-protection/classified-protection.module#ClassifiedProtectionModule'

　　　　　　　　},     这里用的是懒加载路由，模块不少的时候能够用，若是使用懒加载路由，可能用 ng serve --open 启动项目时会报错，可使用ng serve --aot来运行项目

　　　　　模块内路由:

　　　　　　　　const routes: Routes = [

　　　　　　　　　　{
　　　　　　　　　　　　path: '',
　　　　　　　　　　　　component: QueryComponent,    //当前模块组件
　　　　　　　　　　　　children: [
　　　　　　　　　　　　　　{path: 'key-event', component: KeyEventComponent},    //模块子组件
　　　　　　　　　　　　　　{path: 'loophole', component: LoopholeComponent},
　　　　　　　　　　　　　　{path: '', redirectTo: 'key-event', pathMatch: 'full'},
　　　　　　　　　　　　]
　　　　　　　　　　}
　　　　　　　　];

　　　　路由占位符:

　　　　　　<router-outlet></router-outlet>

　　　

　　2.组件

　　　　建立组件: vscode中  ng g component  要建立的组件名字    ------若是要在指定文件夹下建立组件，须要在指定文件夹处打开终端  直接运行命令就行

　　　　父子组件之间的传值：

　　　　　　子>父:

　　　　　　　　一:

　　　　　　　　　　1.在父组件的html中的子组件绑定一个名称　　　　　　

　　　　　　　　　　　　<app-domchild #domchildd></app-domchild>

　　　　　　　　　　2.使用@ViewChild　　　　　　　　　　　　

　　　　　　　　　　　　@ViewChild('domchildd') domchildd;         //括号里要和html中#后面一致

　　　　　　　　　　3.调用一个方法来获取子组件中的值和方法

　　　　　　　　　　　　run(){

　　　　　　　　　　　　　　this.domchildd.run()
　　　　　　　　　　　　　　console.log(this.domchildd.message)
　　　　　　　　　　　　}

　　　　　　　　二:（只能拿到数据）

　　　　　　　　　　1.子组件引入output和eventEmitter

　　　　　　　　　　2.用EventEmitter和output装饰器配合使用 <string>指定类型变量

　　　　　　　　　　　　@Output() private outer=new EventEmitter<string>()

　　　　　　　　　　3.子组件经过EventEmitter对象outer实例 广播数据
　　　　　　　　　　　　注意；该方法须要在ngOnInit()中调用
　　　　　　　　　　　　　　sendparent(){
　　　　　　　　　　　　　　　　this.outer.emit('222')
　　　　　　　　　　　　　　}
　　　　　　　　　　4.父组件调用子组件的时候，定义接收事件，outer就是子组件的EventEmitter对象outer
　　　　　　　　　　　　<app-domchild (outer)="runParent($event)"></app-domchild>
　　　　　　　　　　5.父组件接收到数据会调用本身的runParent方法,这时就能拿到子组件的数据
　　　　　　　　　　　　runParent(msg:string){
　　　　　　　　　　　　　　console.log(msg)
　　　　　　　　　　　　}

　　　　　　父>子:

　　　　　　　　一：传值 

　　　　　　　　　　1.父组件调用子组件的时候传入数据
　　　　　　　　　　　　<app-domchild [msg]="msg"></app-domchild>
　　　　　　　　　　2.子组件中引入 input 模块
　　　　　　　　　　　　@Input() msg:string //只须要定义　　　　
　　　　　　　　　　3.在子组件的html中使用这个属性名
　　　　　　　　　　　　<div>
　　　　　　　　　　　　　　这是父组件的数据----{{msg}}
　　　　　　　　　　　　</div>
　　　　　　　　二：子调用父的方法
　　　　　　　　　　1.父组件调用子组件的时候传入数据 为 this
　　　　　　　　　　　　<app-domchild [msg]="msg" [father]="this"></app-domchild>
　　　　　　　　　　2.子组件中引入 input 模块\
　　　　　　　　　　　　@Input() father:any
　　　　　　　　　　3.this.father.domrun1() 就能够调用父组价中的方法

 

二：angular7中生命周期

　　　　public msg:string="我是一个生命周期演示";

　　　　public userinfo:string="";
　　　　public oldUserinfo:string="";

　　　　constructor() {
　　　　　　console.log("构造函数执行了")
　　　　}

 

　　　　这个生命周期是用于监听 @input绑定的值的 也就是监听父向子传值的
　　　　在实现了父向子传值的代码后再子组件中这样定义
　　　　@Input() msg:string
　　　　ngOnChanges(changes: SimpleChanges): void {
　　　　　　// 若是是第一次赋值的话，那么前一次是undefined
　　　　　　console.log("改变前的值-----"+changes.msg.previousValue)
　　　　　　console.log("改变后的值-----"+changes.msg.currentValue)
　　　　　　console.log("是不是第一次改变-----"+changes.msg.firstChange)
　　　　}必定须要引入包:import { Component, OnInit, Input,SimpleChanges } from '@angular/core';

　　　　ngOnInit() {

　　　　　　console.log("ngOnInit执行了")
　　　　　　this.changeMsg()
　　　　}
　　　　ngDoCheck(): void {
　　　　　　// 写一些自定义的操做
　　　　　　console.log("ngDoCheck执行了")
　　　　　　if(this.userinfo!==this.oldUserinfo){
　　　　　　　　console.log(`你从${this.oldUserinfo}改为${this.userinfo}`)
　　　　　　　　this.oldUserinfo=this.userinfo
　　　　　　}else{
　　　　　　　　console.log("数据没有发生变化")
　　　　　　}
　　　　}
　　　　ngAfterContentInit(): void {
　　　　　　console.log('ngAfterContentInit,只调用一次')
　　　　}
　　　　ngAfterContentChecked(): void {
　　　　　　console.log("ngAfterContentChecked,在ngDoCheck和ngAfterContentInit后执行")
　　　　}
　　　　ngAfterViewInit(): void {
　　　　　　console.log("ngAfterViewInit最先获取dom节点的生命周期,只调用一次")
　　　　}
　　　　ngAfterViewChecked(): void {
　　　　　　console.log("ngAfterViewChecked在ngAfterViewInit和每次ngAfterContentChecked以后执行")
　　　　}
　　　　ngOnDestroy(): void {
　　　　　　console.log("ngOnDestroy执行了---------------------------")
　　　　}

　　　　changeMsg(){
　　　　　　this.msg="我是改变后的值"
　　　　}

 

三：angular7中操做DOM元素

　　　　ngAfterViewInit： //视图加载完成之后触发的方法    dom加载完成  （建议把dom操做放在这个里面） 

　　　　1.ngAfterViewInit(): void {

　　　　　　var boxDom:any=document.getElementById('mydiv')
　　　　　　boxDom.style.color='blue'
　　　　}

　　2.// @ViewChild('里面的值和html div中 #后面的值同样')

　　// myattr是属性名字 能够用 this.myattr访问
　　@ViewChild('myattr1') myattr:ElementRef;
　　ngAfterViewInit(): void {
　　　　let attrEl=this.myattr.nativeElement
　　　　attrEl.style.color='blue'
　　}
　　html中:
　　　　<div #myattr1>
　　　　　　ViewChild操做dom
　　　　</div>

 

四:angular7中异步数据流-Rxjs

　　 目前常见的异步编程的几种方法：

　　　　1.回调函数
　　　　2.事件监听/发布订阅
　　　　3.Promise
　　　　4.Rxjs

　　Promise和Rxjs对比:
　　　　Promise处理异步:
　　　　let promise = new Promise(resolve => {
　　　　　　setTimeout(() => {
　　　　　　　　resolve('---promise timeout---');
　　　　　　}, 2000);
　　　　});
　　　　promise.then(value => console.log(value));
　　　　Rxjs处理异步:
　　　　import {Observable} from 'rxjs';
　　　　let stream = new Observable(observer => {
　　　　　　setTimeout(() => {
　　　　　　　　observer.next('observable timeout');
　　　　　　}, 2000);
　　　　});
　　　　stream.subscribe(value => console.log(value));

　　若是想让异步里面的方法屡次执行，Promise是作不到的,而Rxjs能够:
　　let stream = new Observable<number>(observer => {
　　　　let count = 0;
　　　　setInterval(() => {
　　　　　　observer.next(count++);
　　　　}, 1000);
　　});
　　stream.subscribe(value => console.log("Observable>"+value));

　　　　　　　　　

五：注入服务

　　 angular中持久化保存数据:例如 todolist

　　原理:localStorage
　　export class StorageService {

　　　　constructor() { }
　　　　set(key:string,value:any){

　　　　　　localStorage.setItem(key,JSON.stringify(value));
　　　　}
　　　　get(key:string){

　　　　　　// return 'this is a service';
　　　　　　return JSON.parse(localStorage.getItem(key))

　　　　}
　　　　remove(key:string){

　　　　　　localStorage.removeItem(key);
　　　　}
　　　}

 

　　实现步骤:
　　1.建立服务命令
　　　　ng g service 文件夹名字/文件名 和建立组件相似
　　2.在app.module.ts里面引入建立的服务
　　　　import {StorageService} from './services/storage.service';
　　　　在ngmodule里面的providers里面依赖注入服务
　　　　providers: [StorageService],
　　3.在须要持久化数据的组件中引入服务，注册服务
　　　　import {StorageService} from '../../services/storage.service';
　　　　在构造函数中传入参数
　　　　constructor(private storage:StorageService) { }
　　4.使用
　　　　保存数据到服务中 this.storage.set('todolist',this.todolist)
　　　　首次进入页面时拿到数据:
　　　　ngOnInit() {
　　　　　　// 加入服务 使数据持久化
　　　　　　this.todolist=this.storage.get('todolist')
　　　　}

 

六：关于angular7的UI组件NG-ZORRO

　　　Table表格：须要注意的一些问题

　　　　[nzData]：是页面展现数据的数据源，这个数据源最好不要循环改变，意思就是不要直接把该数据源当错数组遍历到自
　　　　　　己想要的数据，以前需求一个数据去掉[] 符号，而后先让数据源=resp.data,最后把数据源拿去遍历，当时在本地跑是
　　　　　　没有问题的，可是打包到服务器上时，就出现问题了，页面的数据不展现了，全是空白，当时也是没有办法，由于本地
　　　　　　跑是ok的，因此一直没找到缘由，最后前端大佬来看的时候就发现了这个问题，意思就是数据源循环变化致使爆栈了，
　　　　　　至于为何能在本地跑我也不是很清楚，可是[nzData]的数据仍是最好赋一次值

　　　　[nzFrontPagination]：

　　　　　　该属性若是你前端想要写一些假数据，就改成true,若是后台有数据返回必定要改成false，由于若是后台返回 

　　　　　　了data,可是data是空的,那么在服务器上一点就会卡死

　　修改ng-zorro默认样式：

　　　　/deep/ .confirmModal .ant-modal-confirm-body

　　提示信息:

　　　　<a nz-tooltip style="text-decoration:underline" nzTitle="请上传小于10M的文件">添加附件</a>