Intact

Appearance

Angular ​

历史 ​

angularjs：1版本

angular：2及其以后版本

特性 ​

特性

  • 完备的企业级项目解决方案
  • 数据交互模式：MVVM

问题

  • 脏检查
  • 组件化、模块化支持不佳
  • 移动端支持不佳

核心概念 ​

  • 组件 component
  • 模块 modulle
  • 模板 templates
  • 元数据

语法 ​

  • 插值：mustache

  • 属性(变量): 中括号

  • 条件渲染:

    <div  *ngif="xxx else blockif">xxx</div>
<ng-template #blockif>xxx</ng-template>

  • 列表渲染

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

  • 事件绑定

    <button (click)="flag = !flag"></button>
多个逻辑
<button (click)="flag = !flag; el=$event.target"></button>

使用event, 指定当前事件对象（原生
<button (click)="msg='$event.target.innerHTML'"></button>

调用函数
<button (click)="func($event)"></button>

  • 样式绑定

    使用变量进行绑定
<p [class]="myclass"></p>
<p [class.active]="flag"></p> 

使用对象进行绑定 / 动态绑定
<p [ngClass]="{'active': flag}"></p> 或 <p *ngFor="let item of items; let i = index" [ngClass]="{'active': i === current}"></p>
<p [ngStyle]="myStyle"></p> 或 <p [ngStyle]="{'color':'gray'}"></p> 

具体样式绑定
<p [style.color]="flag ? 'orange' : 'red'"></p>

  • 表单绑定

    双向绑定
	前置注入
	1. import {FormModule} from '@angular/forms'
	2. 在imports数组中注入FormModule
	手动实现  <input [value]="msg" (change)="msg=$event.target.value">
	自动     <input [(ngModel)]="msg">  *type为text、checkbox && select等同理

  • 管道 / 过滤器

    时间管道 <p>{{d | date: 'yy-mm-dd hh-mm-ss'}}</p> 
json管道 <p>{{obj | json}}</p> 
数字管道  <p>{{num | number: '1.2-4'}}</p>  整数类型一位，小数类型2位到4位
slice管道 
	<ul>
		<li *ngFor="let item of items|slice:2:4; let i = index">
		
		</li>
	</ul>

使用 ​

启动项目

ng serve

组件

在components下创建名为newComponent的组件，根模块自动载入依赖到declarations中
ng g c components/newComponent

服务

创建 ng g s service/xxx
使用 
	组件中导入服务, 注入依赖, 模板中使用; 实质上这种方式就实现了数据共享

路由

创建 ng g c pages/xxx
配置
	app.routing.components.ts中设置routes, route对象格式为 {path:"", component:ComponentA, redirectTo:"/xxx", pathMatch:'full'}

---

组件中, 通过<a routerLink="/xxx"></a> 进行DOM式路由切换

---

路由传参(动态路由):
	0: 声明动态路由 {path:'user/:id'}
	1. 组件的ts文件中, import {ActivatedRoute} from '@angular/router'; import {Location} from '@angular/common'; 并注入依赖
	2. methods中, 使用this.route.params.subscribe(item=>{...}), 对路由的参数进行get操作

template中使用组件

根据组件的ts文件中的装饰器中的selector属性值，即为html标签名称
<app-child></app-child>

props通信

  • 父->子

    父——传递props

    根组件中，使用props
<app-child [list]="list"></app-child>

    子——接收props

    1. app.component.ts 注入： import { Input } from '@angular/core'
2. child.component.ts 通过@Input获取数据: @Input() list:string[]

  • 子->父

    子

    1. child.component.ts 注入: import {Output, EventEmitter} from '@angular/core'
	属性: @Output selNum = new EventEmitter()
	方法: setCurrent(i){
		this.selNum.emit(i) // 发送数据i
	}
	模板: <button (click)="setCurrent(10)">
2. app.component.ts 接收: <app-child (selNum)="setType($event)"></app-child>
	通过$event接收子组件的emit数据

    父

插槽(略)

生命周期

  • onInit

ref

angular中的ref通过标签内的#xxx来 

<div #child></div>
<p>{{child}}</p>

网络请求

1. 导入模块 import { HttpClient } from '@angular/common'; 到~.module.ts中
2. 依赖注入
3. this.http.get().subscribe()

Last updated: