angular的基本學習

angular中渲染數據用 {{}}

 

基本指令

Angular中的for循環 *ngFor

*ngFor 循環遍歷  *ngFor="let item of arr(要遍歷的數組名稱);let i = index(angular中的索引)"

例：

<ul>

        <li *ngFor = "let item of arr;let i = index">{{i}}-----{{item}}</li>

</ul>

 

Angular中的顯示隱藏 *ngIf

在angular中沒有 *ngShow 這個方法 只有*ngIf=」isShow「與*ngIf="!isShow"

例：

<div *ngIf="isShow">{{mes}}</div>

<div *ngIf="!isShow">{{mes}}</div>

 

注：*ngFor 與 *ngIf 不可同時使用

 

靜態圖片的渲染

定義一個變量 img = '相對的路徑'

引入圖片

1.src = {{img}}

2.[src] = 'img' //動態圖片命令

 

地址

url = 」地址「

1.href = {{url}}

2.[href] = 'url' //動態地址命令

 

angular中的雙數據綁定 [(ngModul)]

ngModule不屬於input的屬性，不能被直接使用，須要在app.module.ts中引入表單模快

import { FormModule } from '@angular/forms'

而且在import中註冊：

import [

　　FormModule ,

]

 

angular中的事件 事件後面都必須加()不然不會執行

(click) 點擊事件

例：

　　<div (click)="toalert()">彈出框</div>

(keydown) 鍵盤按下事件 主要針對的是form元素

例：

　　<input type="text" (keydown)="tochang()">

 

組件渲染的方式

首先經過 ng g c components/index 建立一個組件

1. 組件引入

在html模板中 直接 渲染組件標籤便可

例：

　　<app-index></app-index>

 

2.經過路由的方式 進行組件的渲染

嵌套 (與vue相似)

先引入組件

再在app-routing.module.ts文件下的 const routes: Routes = [] 中配置路由

[

{

    path:'index',　　//地址（要求不能以/開頭）

    component:IndexComponent　　//組件名稱，

　children:[　　//子路由

　　{

　　　　path:'nav',　　//地址（要求不能以/開頭）

    　　　component:NavComponent　　//組件名稱，

　　}，

　　{　

　　　　path:'**',

　　    　redirectTo:'nav'　　//重定向的地址（要求不能以/開頭）

　　}

　]

},

{

    path:'**',

    redirectTo:'index'　　//重定向的地址（要求不能以/開頭）

}

]

 

在組件中要顯示路由

　　<router-outlet></router-outlet>

angular中的路由跳轉

例：　

　　<h2><a routerLink="home">home</a></h2>

　　<h2><a routerLink="nav">nav</a></h2>

routerLinkActive = "select" 當點擊的時候的樣式

 

動態路由

首先在路由文件中設置動態路由

例： 　

{

    path:'details/:id',

    component:DetailsComponent,

},

取值：取得是動態路由的路由參數

在路由跳轉後的頁面進行取值

1.調用動態路由的方法

import {ActivatedRoute} from '@angular/router'

2.在contructor中進行聲明

constructor(

　　public a:ActivatedRoute

){ }

3.利用subscribe這個函數方法對數據進行訂閱監控 觀測數據的實時變化

a.params.subscribe((d)=>{

　　this.name = d.name

})

 

query傳參的方法

有兩種

1. a標籤中 queryParams屬性

例：

<a routerLink="/public/index" [queryParam]='{

　　id=10,

　　name="zhangsan",

　　age=18

}'>

取值：在跳轉以後的頁面取值

　　ac表明的是你聲明的屬性方法

　　this.ac.snapshot.queryParams

2. 編程式導航
//獲取路由相關的方法

import {Router} from '@angular/router'

例：

點擊事件 調用 navigate

goHome(){

　　//編程式導航

　　this.router.navigate(['/public/home'],{

　　　　queryParams:{

　　　　　　id:001,

　　　　　　name:"王五"

　　　　}

　　})

}