Angular2瞎看

介绍

学习angular的相关点，完全不用理会是不是真的某某网 Σ( ° △ °|||)︴
项目gitee地址

@angular/cli

npm i @angular/cli -g全局安装；
ng new my-project新建项目
cd my-project进入目录
ng serve或npm start启动本地务器，预览

新建模块

ng generater component componet/my-component -t -s --skip-tests
简写：ng g c component/my-component -t -s --skip-tests文件夹下新建模块

构造器和周期钩子

constructor(){}，ngOnInit(){}，？？？
例如：constructor(private http:HttpClient){},注入this.http请求模块

指定数据类型

a:string
b:number
c:any
d:Array<any> = []
e:{f:number,g:string}
h:Object = {}或h = {}
fn:EventEmit = new EventEmit()

自定义类(数据类)

ng g class data/my-class必须全拼“class”,ts文件中定义数据的类型或默认值
ng g interface data/my-interface只指定数据结构类型，不用默认值

数据绑定

1. 单向绑定：渲染数据：bind-、[]、{{}}
2. 事件绑定：输入数据:on-click="fn()"、(click)="fn()"，函数必带“()”
3. 双向绑定：数据:[(ngModel)]="val"

[(ngModle)]根模块/路由模块需引入FormsModule

元素类绑定

1. [class]='data'
2. class="btn {{<三目判断>}}"，只能写在一个“class”中才不会被覆盖
3. [class.active="<trueOrFalse>"]
4. [ngClass]={activd:<trueOrFalse>,focues:<trueOrFalse>}

元素属性绑定

1. 隐性属性（css属性）：[style.font-size.px]="14"，[style.width.px]="14"
2. 显性属性（元素属性）：[attr.title]="val",[attr.width.px]="14"，必须指定为“attr”，不与隐性属性混淆
3. 自定义标记符：#keyword，关键字必须和已有属性名区别

遍历、判断

*ngFor="let item of Array"，只能用于数组

*ngIf="boolean else <#name>"，用<ng-template #name>包裹else的元素

根模块引入BrowserModule，根模块/路由模块需引入CommonModule

事件

1. 原生事件
   <input (click)="log($event.target.value)">，原生事件传入log函数
   <input #it (click)="log(#it.value)">，#标记后传入log函数

2. 自定义事件
   定义函数名：update:EventEmit<String> = new EventEmit()，或简写update = new EventEmit()
   触发钩子：this.update.emit(data)，传参数据
   组件接收：<ng-input (update)="log(data)"></ng-input>

组件通信

@input() <data_name>、@output() <data_name_change> = newe EventEmit()，导入、导出
==> <input [data_name]="val" (data_name_change)="log()"> ,???

public，private关键字
scope ？, 脏检查？

跨组件通信:服务和依赖注入DI

1. (单例)服务：创建数据类，以共享数据和功能(函数)
   ng g s service/my-service

2. 依赖注入管理服务：组件中使用“单例”，依赖注入
   例如：constructor(private api:ApiService){},注入api服务
   单例数据默认全局共享，也可模块中单独声明“新的”单例作用域不共享，或创建模块作用域的(单例)服务

管道符filter

1. 自带：slice、currency、lowercase、uppercase、orderBy、filter
2. 自定义：ng g pipe filters/limitTo，需要引入"AppModule"和"ngModule"的根模块/路由模块下,
3. 纯管道和非纯管道：pure:<false/true>，“非”会检测内部数组/对象

自定义module：ng g module myModule/pipe

路由

示例：

import { NgModule } from '@angular/core';
import {RouterModule, Routes} from '@angular/router'
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { LimitToPipe } from './pipe/limit-to.pipe';

import { HomeComponent } from './page/home/home.component';
import { JopDetailComponent } from './page/jop-detail/jop-detail.component';
import { AdminbaseComponent } from './page/admin/adminbase/adminbase.component';
import { AdminJobComponent } from './page/admin/job/job.component';

//(子)路由配置，(根/子路由)重定向
const routes:Routes = [
  {path:"",redirectTo:"home",pathMatch:"full"},
  {path:"home",component:HomeComponent},
  {path:"jopdetail/:id",component:JopDetailComponent},
  {path:"admin",redirectTo:"admin/job",pathMatch:"full"},
  {path:"admin",component:AdminbaseComponent,
    children:[
      {path:"job",component:AdminJobComponent},
    ]
  },
]
//自定义filters引入，路由配置导出
@NgModule({
  declarations: [
    HomeComponent,
    JopDetailComponent,
    AdminbaseComponent,
    AdminJobComponent,
    LimitToPipe
  ],
  exports:[RouterModule],
  imports: [
    CommonModule,
    FormsModule,
    RouterModule.forRoot(routes),
  ]
})
export class AppRoutingModule {}

再app.nodule.ts引入AppRoutingModule；

只在app.module.ts根模块中引入BrowserModule

组件模块中获取“路由传参”：

//AdminComponent.ts
export class AdminComponent implements OnInit {

  constructor(private route:ActivedRoute ) { 
    this.route.paramMap.subscribe(r=>{
      console.log(r)
    })
    //或
    this.route.queryParamMap.subscribe(r=>{
      console.log(r)
    })
  }

  ngOnInit() {}

}

模块中使用模板：
锚点：<a routeLink="<path_name>">path</a>
容器：<router-outlet></router-outlet>

传参？跳转？(权限)守卫？

抽离模块

创建(单例)服务，模块注入数据和功能(方法)：ng g s <s_name>，“@Injectable”依赖注入共享；
创建(父级)模块，子级继承数据和功能(方法)：ng g c <p_name>，extends继承父级模块，且可以子级复写覆盖；

ng-UI库

npm i bootstrap，’/src/style.css’中导入import "~bootstrap"，全局使用bootstrap库

ng表单验证

示例：

<input type="text" 
	name="val" [(ngModel)]="val" 
	#inputVal="ngModel" 
	(change)="log(inputVal)" 
	required minLength="3" pattern="Re">
<div *ngIf="inputVal.touched && inputVal.invalide">
  <div *ngIf="inputVal.errors.requied">必填</div>
  <div *ngIf="inputVal.errors.minLength">不小于3位</div>
  <div *ngIf="inputVal.errors.pattern">正则规则不符合</div>
</div>

name和ngModel绑定数据，#标记表单控件，required和minLength自带验证规则，锚点“inputVal”可以获取到(自动验证)信息

HttpClientModule

根模块引入HttpClientModule，组件中注入http:HttpClient

this.http.post(url,data,{header:{...}}).subscribe(r=>{...})

RxJs：ReactiveX.js
一切都是时间(事件)线Observable的处理，Observable => next() => complete()
文档：我教Rx写文档 —— biaoyansu