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