Angular7學習之路-2019/7/5

時間 2019-11-12

標籤 angular7 angular 學習之路欄目 AngularJS 简体版

原文原文鏈接

一：angular7中配置關係html

　　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'},
　　　　　　　　　　　　]
　　　　　　　　　　}
　　　　　　　　];promise

　　　　路由佔位符:服務器

　　　　　　<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)
　　　　　　　　　　　　}app

　　　　　　　　二:（只能拿到數據）

　　　　　　　　　　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)
　　　　　　　　　　　　}dom

　　　　　　父>子:異步

　　　　　　　　一：傳值 ide

　　　　　　　　　　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>