Angular : 綁定, 參數傳遞, 路由

如何把jquery導入angular

npm install jquery --save
npm install @type/jquery --save-dev

"node_modules/zui/dist/lib/jquery/jquery.js",
"node_modules/jquery/dist/jquery.js",
"node_modules/zui/dist/js/zui.min.js",
"node_modules/zui/dist/lib/dashboard/zui.dashboard.min.js",
"node_modules/zui/dist/lib/datetimepicker/datetimepicker.min.js"

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

angular 循環語法 *ngFor="let *** of ***"

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

插值綁定 {{ zhangsan.name }}

屬性綁定 [href]="url" 能夠用這種特性,把父組件的屬性傳遞給子組件,可是子組件的屬性必需要用@Input()裝飾

DOM屬性綁定,angular全部綁定都是綁定的dom屬性,經過插值綁定和屬性綁定(兩個是一個東西,都是改變dom屬性,最後插值綁定會轉換爲屬性綁定)來改變dom屬性

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

HTML屬性綁定:

基本html屬性綁定:[attr.colspan]="tableColspan"

css類綁定: [class]="xxx" 這樣的話xxx類會徹底替換掉原class的值.

css類綁定2: [class.xxx]="yyy" 若是yyy(布爾值)爲true的話,會添加xxx類.false不會添加

css類綁定3: [ngClass]="{ aaa:isA, bbb:isB }" aaa bbb 爲類的名字,是否顯示由isA isB 表達式控制.

樣式綁定 [style.color]="xxx?'red':'green'" 若是xxx是true,那麼會顯示red,false會顯示green

樣式綁定2 [ngStyle]="{ 'font-style':xxx?'italic':'norma;' }" 和上面差很少,不過是一個對象的形式

事件綁定 (click)="xxx()" 點擊事件會調用 xxx方法.小括號表明是事件綁定語法

雙向綁定 [(ngModel)]="name" view裏面html元素name變化會致使controll裏面綁定的

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

路由聲明 {path:'', component: HomeComponent} 表示根目錄導航到HomeComponent組件

<router-outlet></router-outlet> 路由的組件會展現在這個標籤後面

在a標籤中使用路由: [routerLink]="['/']" 這個a標籤會讓路由path爲 "" 的組件展現在上面那個標籤後面.[routerLink]="['./']"是導航到子路由的書寫方式

在方法中使用router.navigate(["/product"])這種方式來控制路由跳轉,router對象須要寫在構造函數裏面

若是訪問不存在的路由,那麼能夠用 {path: '**', component: Page404Component} 這種方法導航到一個404組件.

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

參數傳遞1 : <a href="" [routerLink]="['/product']" [queryParams]="{id: 1}"> 用queryParam屬性傳遞參數

參數接收1 : private routerInfo: ActivatedRoute 在組件控制器函數的構造函數中定義一個ActivatedRoute 對象
而後用 this.productId = this.routerInfo.snapshot.queryParams["id"];這種方式接收

參數傳遞2 : 須要把route path改成 path: 'product/:id' 這種形式, 傳遞時用[routerLink]="['/product', 1]"

參數接收2 : 把上邊的 queryParams["id"] 改成params["id"]

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

參數訂閱 : 若是在同一個組件裏面路由(從自身路由到自身),那麼snapshot方式就不太合適,由於傳遞的參數不一樣的話快照是不會改變的,能夠用參數訂閱的方式 this.routerInfo.params.subscribe((params: Params) => this.productId = params["id"]);

重定向路由 : {path: '', redirectTo: '/home', pathMatch: 'full'}

子路由 : 在任何一個路由的對象中加上 children屬性,是一個數組,裏面能夠定義子路由

輔助路由: 定義 <router-outlet name="aux"></router-outlet>
路由: {path: 'chat', component: ChatComponent, outlet: 'aux'}
路由連接 : <a href="" [routerLink]="[{outlets: {aux: 'chat'}}]">開始聊天</a>
<a [routerLink]="[{outlets: {aux: null}}]">結束聊天</a>
輔助路由爲了處理兄弟組件之間的關係,如兩個組件同時顯示可是不能互相干擾.
<a [routerLink]="[{outlets: {primary: 'home', aux: 'chat'}}]">開始聊天</a> 也能夠用primary顯式指定點擊連接以後主路由插座須要顯式的組件

路由守衛 : 繼承CanActivate接口,重寫canActivate方法,若是返回false,那麼不會展現被守衛的路由組件
路由裏面加屬性 canActivate: [繼承CanActivate接口的類]
providers: [繼承CanActivate接口的類]s

CanDeactivate 離開路由時, resolve 組件被加載過程當中,同理
resolve屬性裏面不是數組而是對象.如resolve: {product: ProductResolve}

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

建立一個自定義管道 ng g pipe /pipe/xxx 使用管道 {{ xxx | yyy:'zzz' }} yyy爲管道名 zzz爲可選參數