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:"王五"

　　　　}

　　})

}