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:"王五" } }) }
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
