angular7.0使用指南

本文章宗旨在于快速開始angular開發，或者快速了解angular開發注意事項的文章

環境搭建

腳手架安裝：npm i -g @angular/cli
建立項目：ng new my-app

如果安裝腳手架報錯，強制清理npm緩存後重新安裝

元件與模闆

當你下載下傳好官方案列後，你可能對目錄都不太熟悉，先不要将關注點放在這裡，文章緻力于如何快速上手一個angular項目。

了解模闆表達式上下文

表達式中的上下文變量是由以下三種組成：

模闆變量（模闆的 $event 對象、模闆輸入變量 (let hero)和模闆引用變量(#heroForm) ）
指令的上下文變量（指令中的屬性）
元件的成員變量（元件實列）

當存在相同的表達式變量優先順序：模闆變量>>指令的上下文變量>>元件的成員變量

import { Component } from '@angular/core';

//my-app/src/app/app.component.ts
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  private data0:Number = ; 
  data1 = '<div>dddddd</div>';
  data2 = {
    aaa:
  };
  data3(){
  };
  data4 = null;
  data5 = undefined;
  data6 = [,,]
}
複制代碼

<div>
  <div>data0 ：{{data0}}</div>
  <div>data1 ：{{data1}}</div>
  <div>data2 ：{{data2}}</div>
  <div>data3 ：{{data3}}</div>
  <div>data4 ：{{data4}}</div>
  <div>data5 ：{{data5}}</div>
  <div>data6 ：{{data6}}</div>
  <div>data7 ：{{data7}}</div>
</div>

<!-- 
	data0 ：1121
	data1 ：<div>dddddd</div>
	data2 ：[object Object]
	data3 ：function () { }
	data4 ：
	data5 ：
	data6 ：1,2,3
	data7 ： 
-->
複制代碼

了解HTML attribute 與 DOM property

先來看一個列子

//html：<input type="text" value="a">
var outPutVal = function(){
    console.log('getAttribute：',inO.getAttribute('value'));
    console.log('inO.value:',inO.value);
}

window.onload = function(){
    var inO = document.querySelect('input');
    outPutVal(inO);
    //getAttribute： a
    //inO.value: a
    document.onclick = function(){
        //<input type="text" value="a"> 手動輸入value為aaaaa後列印
        outPutVal(inO);
        //getAttribute： a
        //inO.value: aaaaa
    }
}
複制代碼

以上原生js展示了HTML attribute 與 DOM property 的差別:

少量 HTML attribute 和 property 之間有着 1:1 的映射，如 id。
有些 HTML attribute 沒有對應的 property，如 colspan。
有些 DOM property 沒有對應的 attribute，如 textContent。

angular中模闆綁定是通過 property 和事件來工作的，而不是 attribute

特殊的attribute 綁定

[attr.aria-label]="actionName"
<td [attr.colspan]="1 + 1">
複制代碼

指令

指令分為三種：

元件 — 擁有模闆的指令
結構型指令 — 通過添加和移除 DOM 元素改變 DOM 布局的指令
屬性型指令 — 改變元素、元件或其它指令的外觀和行為的指令。

屬性指令

ngClass
ngStyle
ngModel

結構型指令

ngIf
ngFor
ngSwitch

ng-template *号文法

<div *ngIf="hero" class="name">{{hero.name}}</div>
-----------------------------------
<ng-template [ngIf]="hero">
  <div class="name">{{hero.name}}</div>
</ng-template>
複制代碼

<div *ngFor="let hero of heroes; let i=index; let odd=odd; trackBy: trackById" [class.odd]="odd">
  ({{i}}) {{hero.name}}
</div>
-----------------------------------
<ng-template ngFor let-hero [ngForOf]="heroes" let-i="index" let-odd="odd" [ngForTrackBy]="trackById">
  <div [class.odd]="odd">({{i}}) {{hero.name}}</div>
</ng-template>
複制代碼

在渲染視圖之前，Angular 會把 < ng-template > 及其包裹内容替換為一個注釋

ng-container

會将兄弟元素歸為一組并且ng-template 會無副作用的包裹内部元素

無副作用是什麼意思？（舉個例子：破壞了html結構！）：

<p>
  I turned the corner
  <span *ngIf="hero">
    and saw {{hero.name}}. I waved
  </span>
  and continued on my way.
</p>

---------------------------

<p>
  I turned the corner
  <ng-container *ngIf="hero">
    and saw {{hero.name}}. I waved
  </ng-container>
  and continued on my way.
</p>
複制代碼

元件--特殊的指令（擁有模闆的指令）

ng g c components/A 建立元件
複制代碼

元件通信的幾種方式

1.輸入屬性 @Input()（父元件傳遞資料給子元件）

//a.component.ts
  @Input()
  inAttr:String;


  private _name:String = '';
----------------------------------------------------
  @Input()
  set inAttr2(name:String){
    this._name = name;
  }
  
  get inAttr2():String{
    return this._name;
  }
複制代碼

2.輸出屬性 @Output()（子元件傳遞資料給父元件）

//子元件中
@Output()
myEvent:EventEmitter<DataType> = new EventEmitter();

this.myEvent.emit(Data);

//父元件中
(myEvent)="myHandleEvent($event)"
myHandleEvent(Data:DataType){
    
}
複制代碼

3.中間人模式（兄弟元件通過公共的父元件傳值）

4.父元件獲得子元件引用 #child（隻可以在元件模闆中使用）

5. @ViewChild()父元件類插入子元件（在元件類中使用）

被注入的子元件隻有在 Angular 顯示了父元件視圖之後才能通路（ngAfterViewInit生命周期中通路）
Angular 的單向資料流規則會阻止在同一個周期内更新父元件視圖。應用在顯示秒數之前會被迫再等一輪。
解決方法：使用 setTimeout() 來更改資料

@ViewChild(ChildComponent)
private childComponent: ChildComponent;

ngAfterViewInit() {
    setTimeout(() => this.seconds = () => this.childComponent.changeData, );
}
複制代碼

6.通過服務更改資料（任意元件結構中使用）

自定義指令

ng g d myDirective/demo
複制代碼

屬性型指令

ElementRef：對視圖中某個原生元素的包裝器。

import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[appDemo]'
})
export class DemoDirective {
  //構造函數要聲明需要注入的元素 el: ElementRef。
  constructor(private el:ElementRef) { }
  // 注冊事件
  @HostListener('click')
  show(){
    console.log(this.el.nativeElement);
    console.log(this.ss);
  }
  //指令參數，當參數名與指令名相同時，可以直接指派給指令
  @Input()
  ss:String = 'aaa';
}

複制代碼

<button appDemo [ss]="bbb">click me</button>
複制代碼

結構型指令

TemplateRef：取得 < ng-template > 的内容

ViewContainerRef: 通路視圖容器

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({ selector: '[appUnless]'})
export class UnlessDirective {
  //第一次傳入true時不執行任何if分支,提升性能
  private hasView = false;

  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef) { }

  @Input() set appUnless(condition: boolean) {
    if (!condition && !this.hasView) {
      //實列化一個試圖，并把它插入到該容器中
      this.viewContainer.createEmbeddedView(this.templateRef);
      this.hasView = true;
    } else if (condition && this.hasView) {
      this.viewContainer.clear();
      this.hasView = false;
    }
  }
}
複制代碼

管道

你可以将管道了解成将資料處理之後再顯示的一種操作符，如：

<p>{{ birthday}}</p>
<p>{{ birthday | date }}</p>
<!--鍊式調用管道-->
<p>{{ birthday | date | uppercase}}</p>
複制代碼

angular内置的管道：

DatePipe、UpperCasePipe、LowerCasePipe、CurrencyPipe 和 PercentPipe.......

自定義管道

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'exponentialStrength'})
export class ExponentialStrengthPipe implements PipeTransform {
  transform(value: number, exponent: string): number {
    let exp = parseFloat(exponent);
    return Math.pow(value, isNaN(exp) ?  : exp);
  }
}
複制代碼

純(pure)管道與非純(impure)管道

Angular 隻有在它檢測到輸入值發生了純變更時才會執行純管道。純變更是指對原始類型值(String、Number、Boolean、Symbol)的更改，或者對對象引用(Date、Array、Function、Object)的更改。
Angular 會在每個元件的變更檢測周期中執行非純管道。非純管道可能會被調用很多次，和每個按鍵或每次滑鼠移動一樣頻繁。

@Pipe({
  name: 'flyingHeroesImpure',
  pure: false
})
export class FlyingHeroesImpurePipe extends FlyingHeroesPipe {}
複制代碼

依賴注入

依賴注入是實作控制反轉的一種方式，将對象的創造權交出去，它的好處可以在實際開發中展現出來，以下會介紹它

angular實作控制反轉的手段就是依賴注入

依賴注入的好處：

依賴注入會讓你用一種松耦合的方式去寫代碼，易于調試：

舉個例子：

當你的服務分為開發版本與線上版本時，你可能需要兩個不同的服務devDataSevice與proDataSevice, 當你不使用依賴注入時，你需要在多個元件中new 出這兩個對象來使用這兩個服務，線上上環境與測試環境之間切換時，你需要更改多個元件中的代碼，如果使用依賴注入的形式，你隻需要更改提供器中的代碼就可以更改所有元件中的服務，這大大降低了代碼的耦合程度并且提高了可維護性。

首先建立一個服務

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class HeroService {
  constructor() { }
}
複制代碼

服務提供商（注入器）

在哪裡書寫服務提供商：

在服務本身的 @Injectable() 裝飾器中的 providedIn 的中繼資料選項

providedIn的值可以是'root'或者某個特定的NgModule
在 NgModule 的 @NgModule() 裝飾器中的providers中繼資料選項
在元件的 @Component() 裝飾器中providers中繼資料選項
在指令的 @Directive() 裝飾器中providers中繼資料選項（元素級注入器）

providers中如何書寫：

provider:[ProductService]
provider:[{provide:ProductService,useClass:ProductService}]
provider:[{provide:ProductService,useClass:AnotherProductService}]
provider:[{provide:ProductService,useFactory:(參數A)=>{return ob},deps:[參數A]}]
provider:[{provide:"IS_DEV_ENV",useValue:{isDev:true}}]
複制代碼

注入器冒泡

Angular 會嘗試尋找該元件自己的注入器
如果該元件的注入器沒有找到對應的提供商，它就去尋找它父元件的注入器直到 Angular 找到一個合法的注入器或者超出了元件樹中的祖先位置為止。
如果超出了元件樹中的祖先還未找到，Angular 就會抛出一個錯誤。

注入服務：

在構造函數中注入：

construct(private productService:ProductService){...};
複制代碼

@Optional()是對productService的裝飾器，當找不到服務的提供商時，參數值設為null
@Host() 裝飾器會禁止在宿主元件以上的搜尋。宿主元件通常就是請求該依賴的那個元件。不過，當該元件投影進某個父元件時，那個父元件就會變成宿主。
@Inject()自定義提供商
@Self() 和 @SkipSelf() 來修改提供商的搜尋方式

@angular/router路由

設定base标簽,告訴路由該如何合成導航

<!--index.html中的head标簽中加入<base href="/" target="_blank" rel="external nofollow" >來告訴路由該如何合成導航用的 URL-->
<base href="/">
複制代碼

導入路由配置

//app.module.ts
//導入路由核心子產品
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {path:'**',component:AComponent}
];

@NgModule({
  ...
  imports: [RouterModule.forRoot(routes)]
  ...
})
export class AppModule { }
複制代碼

Routes路由配置介紹

path "**"表示比對所有
redirectTo "表示要轉走的路徑"
pathMatch "full"表示比對程度
component 表示要顯示的元件
data 資料傳遞
children:[] 子路由
canActivate:[PermissionGuard]
canDeactivate:[FocusGuard]
resolve:{Stock:StockResolve}
outlet 輔助路由
設定導航輸出位置

<router-outlet></router-outlet>
<!-- Routed components go here -->
複制代碼

路由跳轉

聲明式跳轉

<a [routerLink]="['/path']" routerLinkActive="active">routelink</a>
<a [routerLink]="['./path']">routelink</a>
<a [routerLink]="['{outlets:{aux:'aaa'}}']">routelink</a> 輔助路由 
http://localhost:4200/a(aux:aaa)
複制代碼

指令式跳轉

Router可調用navigate與navigateByUrl()

路由資料傳遞：

//1.
[routerLink] = "['/path',1]"
//http://localhost:4200/path/1
// this.routeInfo.snapshot.queryParams
//2.
[routerLink]="['/b',1]" [queryParams]="{id:3}"
// http://localhost:4200/b/1?id=3
// this.routeInfo.snapshot.params
// 3.
{path:'a',component:AComponent,data:{id:}} 
//this.routeInfo.snapshot.queryParams
//this.routeInfo.snapshot.data
複制代碼

ActivatedRoute 常用：this.routeInfo見上面

守衛路由

1.canActivate

export class PermissionGuard implements CanActivate{
  canActivate(){
    let hasPemission:boolean = Math.random() < ;
    return hasPemission;
  }
}
複制代碼

2.canDeactivate

export class FocusGuard implements CanDeactivate<CComponent>{
  canDeactivate(component:CComponent){
    if(component.isFoucs){
      return true;
    }else {
      return confirm('不關注一下嘛？');
    }
  }
}
複制代碼

3.resolve 讀取資料前

@Injectable()
export class StockResolve implements Resolve<Stock>{
  constructor(
    private route:Router
  ){}
  resolve(route:ActivatedRouteSnapshot,state:RouterStateSnapshot){
      return new Stock(,'name');
  }
}
複制代碼

生命周期鈎子

當 Angular的元件或指令，建立、更新和銷毀時所觸發的鈎子函數

鈎子函數的執行順序

constructor 這個不是生命周期鈎子，但是它一定是最先執行的
ngOnChanges 輸入屬性被指派時調用 (不可變對象的改變)
ngOnInit 第一次顯示資料綁定和設定指令/元件的輸入屬性之後
ngDoCheck 在每個變更檢測周期中，緊跟在 ngOnChanges() 和 ngOnInit() 後面調用
ngAfterContentInit 外部内容投影進元件/指令的視圖之後調用
ngAfterContentChecked 投影元件内容的變更檢測之後調用
ngAfterViewInit 初始化完元件視圖及其子視圖之後調用
ngAfterViewChecked 元件視圖和子視圖的變更檢測之後調用
ngOnDestroy 次銷毀指令/元件之前調用

初始化階段

//1.constructor 
//2.ngOnChanges
//3.ngOnInit
//4.ngDoCheck
//5.ngAfterContentInit
//6.ngAfterContentChecked
//7.ngAfterViewInit
//8.ngAfterViewChecked
複制代碼

變化階段

//1.ngOnChanges
//2.ngDoCheck
//3.ngAfterContentChecked
//4.ngAfterViewChecked
複制代碼

元件銷毀階段

//1.ngOnDestroy
// 在路由變更時改變
複制代碼

ngAfterViewInit,ngAfterViewChecked

子元件組裝好父元件才會組裝
元件是在試圖組裝完畢調用
再此方法中不可以更改視圖資料

ngAfterContentInit,ngAfterContentChecked，投影

1.子元件
<div>
  <ng-content></ng-content>
</div>
2.父元件
<SComponent>
    <!--在此寫入的東西會投影到子元件-->
</SComponent>
複制代碼

表單

ReactiveFormsModule響應式表單
FormsModule模闆式表單

模闆式表單

在angular中會自動加上ngForm來處理表單，如果不用angular來處理則加上ngNoForm
在表單中加上#myForm="ngForm",則可以在頁面使用{{myForm.value | json}}去檢測表單中有ngModule的value 對象名為name值

NgForm 對應 FormGroup

ngModel 對應 FormControl

ngModelGroup 對應 FormArray

<form #myForm="ngForm" action="/regist" (ngSubmit)="createUser(myForm.value)" method="post">
  <div>
    <input ngModel name="a" type="text" required pattern="[a-zA-Z0-9]+">
  </div>
  <div>
    second:<input ngModel #second="ngModel" name="a" type="text" required pattern="[a-zA-Z0-9]+">
  </div>
  <div>
    <input ngModel name="b" type="text" required pattern="[a-zA-Z0-9]+">
  </div>
  <div ngModelGroup="tow">
    <input ngModel name="a" type="text">
    <input ngModel name="b" type="text">
  </div>
  <button type="submit">送出</button>
</form>
<div>
  {{myForm.value | json}}
  <br>
  second值是：{{second.value}}
</div>
複制代碼

響應式表單

private nickName = new FormControl('tom');
private passwordInfo = new  FormGroup({
  password: new FormControl(),
  passwordConfirm:new  FormControl()
});
private email = new FormArray([
    new FormControl('[email protected]'),
    new FormControl('[email protected]')
]);
複制代碼

FormControl

管理單體表單控件的值和有效性狀态

FormGroup

管理一組 AbstractControl 執行個體的值和有效性狀态

FormArray