Angular 使用手冊

1.首先咱們要npm 安裝angular-cli npm i -g @angular/cli

建立一個本身的項目

ng new myAn

myAn是咱們的項目名。

angular組件結構

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'myAn';
}複製代碼

組件生成

從angular主模塊中獲取組件裝飾器

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

調用組件裝飾器定義，以json方式傳入組件源數據 @Component(json)

selectore:string  組件標籤名 <string></string>調用

temlateUrl:string   組件html模板路徑

styleUrls:Array<string>   組件css文件路徑數組

定義組件控制器，邏輯代碼的地方

export class AppComponent{}

模塊組成器

import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }複製代碼

引入模塊生成器 @NgModule

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

模塊生成器的參數json

declarations: Array   組合模塊的組件和管道的數據源

imports:modules  模塊依賴項

providers:Array  模塊提供的服務

bootstrap:Array  模塊的主組件

建立組件命令

ng g component 組件名

外部傳入值屬性

須要import @Input 核心模塊

import {Input} from "@angular/core"

export class Componet {
    //聲明可外部傳值變量
    @Input
    props:[];
    //聲明完畢
}複製代碼

外部對組件標籤傳值

<Componet [props]="[0,1,3]"></Componet>

循環指令

*ngFor="let a in Array;let i in index "

a: 代理條目

index: 索引

屬性綁定指令 []

綁定class

[class.newClass]=bloore  或  [ngClass]={'a':true,'bb':false,'c':true}

綁定style

[style.font-size]='24px'  或  [ngStyle]={ 'font-size':'24px' , 'color': a>10 ?'red':'#fff' }

Angular路由系統

路由對象

Routes:Array<json> 路由配置項

<router-outlet></router-outlet> 路由視圖view標籤

Router 路由器對象，能夠經過調用其navigate()和navigateByUrl()方法來導航到一個指定的路由

Router.navigate(Array<string>)  將路由跳轉到指定路由['/']

routerLink：string  將標籤爲路由導航的屬性<a router-link="home"></a>

ActivatedRouter  當前路由激活的對象。當前路由地址，路由參數

路由配置項參數 routes

Routes:Array<json>

json: {path: '',component : center}

path: 路由路徑，不帶/，通配符 **

component:object 組件對象

當前路由激活對象屬性和方法 ActivatedRouter 

proto.queryParams[id] 當前路由激活對象的get參數對象= ?id=10

proto.params[id]  當前路由激活對象的參數= a/:id

proto.data[index].id 當前路由激活的data數據 =  [path:'',component:com,data:[{id:abc}]]

重定向路由 redirectTo 和 pathMatch

{path:'', redirectTo:'/home',pathMatch:'full'}

redirectTo:string重定向到的路由地址

pathMatch:full 是否開啓精確模式

輔助路由

html佔位符結構：

//路由輸出器
<router-outlet></router-outlet>
//輔助路由輸出器"aux"
<router-outlet></router-oulet name='aux'>複製代碼

路由配置：

routes=[
    {path:'',component:center},//主路由顯示器顯示
    {path:'auxVivwe',component:auxViwe,outlet:'aux'}//輔助路由顯示
    {path:'abcd',component:abcd,outlet:'aux'}//輔助路由顯示

]複製代碼

路由導航：

主路由爲/，輔助路由跳轉到auxVivwe
<a [routerLink]="['/',{outlet:'aux','auxVivwe'}]">1</a>
複製代碼

路由守衛

CanActivate:fun處理路由到某路由的狀況調用，方法返回真容許路由進入，返回假阻止路由。

CanDeactivate:fun 處理當前路由離開的情況調用，

Resolve:fun 在路由激活數據以前調用

對路由注入路由守衛

{path:'/home',component:a,CanActivate:[abc實例,]}

路由數據獲取函數

object.subscribe(backFuntion)  訂閱數據，對象數據發生改變當即調用回調方法

object.snapshot.object  獲取數據快照

依賴注入，控制反轉

注入器：

constructor(prod:prod){}

提供器：

providers:[{provider:'prod',useClass:prod}]  直接實例

providers:[{provider:'prod',useFactory:()=>{ return 1},deps:[loge]}]   提供工廠方法值

providers:[{provider:'prod',useValue:false}]   提供一個值

配置參數

provider:string 簽名

useClass:class 提供的實例

useFactory:function   經過方法返回類或值，工廠方法只會在須要提供服務時候被調用一次所返回的值會常駐而且後續的使用直接返回此值

deps:Array<class>  爲工廠方法提供的中間提供器，它所提供的服務其餘是從@ngModule或@component中查找過來的

提供器 providers 能夠在@ngModuls()或@component中聲明

數據綁定

1.插值表達式綁定  <h1>{{init}}~</h1>

2.將變量值或表達式單向綁定到DOM屬性上  <img [src]="ImgData">

3.將變量值或表達式單向綁定到HTML屬性上 <img [attr.src]='imgData' 

4.事件綁定,使用括號綁定事件 <div (click)="loader()"></div>

5.class綁定（全class替換成指定） <div class="aa bb" [class]="className"></div>//.className

6.class綁定 (增長或取消此class) <div class='aa bb' [class.cc]="true"></div>//.aa .bb .cc

7.class綁定，json表達式  <div [ngClass]="{aa:false,bb:true}">//.bb

8.style樣式綁定，指定樣式表達式 <div [style.color]="a?red:green">

9.style樣式綁定，josn表達式  

<div [ngStyle]={'font-0size':a?'12px':'30px','color':a?'red':'green'}>

10.雙向綁定 ,控制器值與視圖值同步更新 <input [(ngModel)]="name">

管道（過濾器）

將值進行過濾後返回

與VUE中寫法同樣  {{value| fun }}

angular內置管道

轉換成時間data格式  date:'yyyy-mm-dd'

轉換成所有大寫  uppercase

轉換成小寫  lowercase

轉換數字格式 number:'2.2-2'

自定義管道須要聲明在declarations中初始化

建立自定義管道  命令行 ng g pipe /piper/modele/  

組件之間通訊

父子組件通訊

父傳值

@Input()
a:string;
<app-e  [a]='hello'></app-e>複製代碼

子發射事件屬性，父組件接收事件觸發 ： EvnetEmitter

//父組件模板
<div>
    <app-son (close)="setClose()"> </app-son>
</div>

exprot class app{
    setClose(){
        console.log('子組件要關閉拉')
    }
}複製代碼

//子組件
<input type="button" (click)="postClose">

exprot class son{
    //發射事件屬性聲明
    @Output('close')
    emit:EventEmitter<any>=new EventEmitter()

    postClose(){
        //發射
        this.emit.emit()
    }
}

複製代碼

@Output('close')
emit:EventEmitter<any>=new EventEmitter()
複製代碼

表示發射出去的事件名爲close。

EventEmitter 是angalur的事件觸發對象

父組件調用子組件的方法 @ViewChild();

@ViewChild('child')
child1:component

this.child1.get();//調用子組件的方法複製代碼

組件生命週期鉤子

鉤子	用途及時機
ngOnChanges()	當 Angular（從新）設置數據綁定輸入屬性時響應。 該方法接受當前和上一屬性值的 SimpleChanges 對象 當被綁定的輸入屬性的值發生變化時調用，首次調用必定會發生在 ngOnInit() 以前。
ngOnInit()	在 Angular 第一次顯示數據綁定和設置指令/組件的輸入屬性以後，初始化指令/組件。 在第一輪 ngOnChanges() 完成以後調用，只調用一次。
ngDoCheck()	檢測，並在發生 Angular 沒法或不肯意本身檢測的變化時做出反應。 在每一個 Angular 變動檢測週期中調用，ngOnChanges() 和 ngOnInit() 以後。
ngAfterContentInit()	當把內容投影進組件以後調用。 第一次 ngDoCheck() 以後調用，只調用一次。
ngAfterContentChecked()	每次完成被投影組件內容的變動檢測以後調用。 ngAfterContentInit() 和每次 ngDoCheck() 以後調用
ngAfterViewInit()	初始化完組件視圖及其子視圖以後調用。 第一次 ngAfterContentChecked() 以後調用，只調用一次。
ngAfterViewChecked()	每次作完組件視圖和子視圖的變動檢測以後調用。 ngAfterViewInit() 和每次 ngAfterContentChecked() 以後調用。
ngOnDestroy()	當 Angular 每次銷燬指令/組件以前調用並清掃。 在這兒反訂閱可觀察對象和分離事件處理器，以防內存泄漏。 在 Angular 銷燬指令/組件以前調用。

自定義投影內容到組件中 ng-centent

//組件1模板內容
<div>
    <ng-centent></ng-centent>
</div>

//組件2調用傳入投影
<app-component1>
    <h1>123456,我是投影進來的</h1>
</app-component1>複製代碼

angalur表單處理 ngFrom

在angalur中會自動爲from表單添加ngFrom指令進行全部表單數據被綁定ngModule的指令進行自動處理

ngFrom 當表單被添加ngFrom指令時候能夠經過myFrom訪問全部表單數據

ngSubmit anglular中使用ngSubmit事件代替原生的submit提交事件

ngModuleGroup  表單數據對象的子集。

響應式表單 reactiveFromsModule