angular

搭建项目

1.安装nodejs
2.安装脚手架
3.全局安装angular脚手架 cnpm install -g @angular/cli
4.创建项目：进入项目目录
5 执行：ng new argulardemo
6.打开项目：ng serve --open

创建组件

1.通过命令行创建：ng g component components/组件名（components为创建的目录名）
2.创建后会自动在app.module.ts文件自动引入
3.引入组件：(componentName为组件名)

数据绑定

1.通过双大括号绑定：{{data}}
2.ts文件里面定义：data = “my is data”

绑定属性

1.在标签上绑定属性是需要添加 [ ]中括号
2.列如：<div [title]=“title”>

HTML解析

1.通过 innerHTML解析
2.列如：<div [innerHTML]=“content”>

遍历数据

1.通过 *ngFor=“let item of dataList”

在标签通过switch判断显示

1.在父级标签定义 [ngSwitch=“status”]
2.在父级标签下的子标签通过 *ngSwitchCase="1"进行判断

<div [ngSwitch]="orderStatus">
    <p *ngSwitchCase="1">
        已完成
    </p>
    <p *ngSwitchCase="2">
        已支付
    </p>
    <p *ngSwitchCase="3">
        已发送
    </p>
    <p *ngSwitchCase="4">
        未支付
    </p>
    <p *ngSwitchDefault>
        其他
    </p>
</div>

ts代码

public orderStatus:number = 2;

通过[ngClass]动态绑定class

1.在标签上面通过[ngClass]="{‘className’:flang}"
2.如果flang属性为true是绑定class

<div [ngClass]="{'classNameThree':flang}">hello ngClass</div>

双向绑定style

属性值为一个属性，可以动态修改该属性是来改变页面样式

<div [ngStyle]="{'color':attr}">双向绑定style</div>

管道：转成日期格式

<div>{{time | date:'yyy-MM-dd HH:mm ss'}}</div>

public time:any = new Date();

事件绑定

<button (click)="myclick()">点击事件</button>

 ngOnInit(): void {
  }
  myclick(){
    console.log("点击事件触发   东窗事发")
  }

使用双向数据绑定

1.需要在app.module.js文件引入forms;
2,引入之后需要在import对象里面进行注册
3.需要在input标签里面定义[(ngModel)]=“data”

import {FormsModule} from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    NewsComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],

    <h2>双向数据绑定</h2>
    <input type="text" [(ngModel)]="keywords"/>
    {{keywords}}
</div>

声明周期钩子函数

1.constructer方法触发
2.ngOnchanges当父子组件传值时触发
3.ngInit当加载完成后触发
4.ngDochecked当angular无法或不愿意检测时触发
5.ngAfterContentInit当内容投影进组件后触发
6.ngAfterContentChecked每次完成被投影组件的更新检测后触发
7.ngAfterViewInit初始化完组件视图及子组件视图后触发
8.ngAfterViewChecked每次做完组件及子组件视图更新检测完成后触发

rxjs异步回调

1.在服务里面引入rxjs import {Observable} from “rxjs”;
2.使用return 返回Observable实例
return new Observable((observa)=>{
})
3.在Observable实例里面传入一个参数，
4.调用该参数的next方法回调数据
observa.next(需要回调的数据)
5.如果回调失败的数据则需要调用error方法
observa.error()
6.获取Observable回调的数据则调用Observable实例的subscribe方法然后传入一个函数，以该函数的形参返回数据

   var observa=this.services.getRxjsData();
    console.log(observa)
    observa.subscribe((data)=>{
      console.log("this is rxjs data",data)
    })

7.如果需要取消异步事件需要调用unsubscribe方法

请求数据

1. 在app.module文件引入 HttpClientModult组件
   import {HttpClientModult} from ‘@angular/common/http’
   2.在ngModule方法里面的import数组里面注册组件
   3.在请求的文件里面引入HttpClient组件
   import {HttpClient} from ‘@angular/common/http’
   4.在constructor方法里面定义该组件并赋值给一个属性
   5.通过this获取到该属性调用获取数据的方法
   this.http.get()
   6.由于angluar是通过rxjs封装的数据请求所以会方法一个subscribe方法
   7.调用subscribe方法传入一个参数就可以获取到数据

这是请求头

1. 在app.module文件引入HttpClientModule模块
   import {HttpClientModule} from ‘@angluar/common/http’
2. 在用到请求的文件引入HttpClient和HttpHeaders
   import {HttpClient,HttpHeaders} from ‘@angluar/common/http’
3. 设置请求头
   const httpOptions {headers:new HttpHeaders({“Content-Type”:‘application/json’})}

创建服务

1. 通过ng g service services/serviceName
2. 在app.module文件里面引入
3. import serviceName from ‘服务的地址’
4. 在ngModule方法里面的providers里面注册
5. 在用到服务的组件里面再次引入 import serviceName from ‘服务地址’
6. 在constructor方法里面进行注册并赋值给一个属性
7. 通过this.属性名获取到服务里面的方法或属性

配置路由

1. 在app.module文件里面引入组件并注册
2. 在app.routing.module文件里面引入组件并配置路由
3. 通过 routerLink跳转
5. 配置默认页面，比如默认是首页。需要在配置路由是path定义**，接着从定向到指定页面
6. {path:’**’，redirectTo:"/home"}

路由传参

1.通过routerLink跳转传参，在标签上定义queryParams进行传参
<div [routerlink]="[’/new’]’ [queryParams]="{id:xxx,value:xxx}">

2.在接收参数的页面引入Activated import {Activated} from "@angluar/router" 3.在constructor方法里面定义并赋值给一个属性 4.找到该属性里面的queryParams属性 5.调用queryParams里的subscribe方法获取数据 ## 动态路由 1. 在app-routing.module.js文件里面配置路径时，冒号定一个属性 2. 当通过标签跳转时，在路径后边添加属性值 3. 在接收的文件里面通过this.route.params里面的subscribe方法获取数据 ## js路由跳转传参 1引入NavigationExras模块 import {NavigationExras} from '@angular/router' 2.定义需要传的参数并定义类型为NavigationExras 3.跳转时参数定义在中括号的后面