angular学习笔记

1. 基本语法
   • *ngFor
   • *ngIf
2. 父子组件通信
   • 子组件调用父组件的数据 ：父组件传入[title] = 'title',子组件@input接收之后通过this直接使用
   • 子组件调用父组件的方法：同上
   • 父组件调用子组件的数据：
     • 子组件#footer命名，父组件@viewChild引入，通过this.footer.*使用
     • 子组件暴露一个 EventEmitter属性，当事件发生时，子组件利用该属性 emits(向上弹射)事件。父组件绑定到这个事件属性，并在事件发生时作出回应。

• 父组件调用子组件的方法
• 非父子组件数据共享

3. 兄弟组件通信方法（除了路由/storage，可以通过BehaviorSubject)

4. 生命周期

5. rxjs：是一种针对异步数据流的编程
   异步编程：

   • 回调函数callback
   • promise

   • rxjs，写法与promise基本相同resolve->observer.next, then->subscribe

     
     
     image.png
     
     
     image.png
     • unsubscribe可以取消执行操作

     • promise无法执行多次，rxjs可以执行多次

       
       
       image.png
     • 通过pipe使用工具函数map、filter

6. 接口请求

   • get方式

   在app.module.ts中引入HttpClientModule并注入
   在使用的地方从common/http中引入httpClient，并在构造函数中声明httpClient

     this.http.get(api ).describe(response:any)=> {}
   

   • post 提交数据

   在app.module.ts中引入HttpClientModule并注入
   在使用的地方从common/http中引入httpClient、HttpHeaders并在构造函数中声明httpClient

   let headersOptons = {
     headers: new HttpHeaders({ 'Content-Type' : 'applicaton/json' }) 
   }
   this.http.post(api , paramsObj, headersOptons).describe(response:any)=> {}
   

   • jsonp方式

   在app.module.ts中引入HttpClientModule/HttpClientJsonpModule并注入
   在使用的地方从common/http中引入httpClient并在构造函数中声明httpClient
   验证是否支持jsonp：api?callback=*** || api?cb=***

     this.http.jsonp(api , 'callback').describe(response:any)=> {}
   

   • 使用第三方模块axios进行数据请求

   1.创建service

   2. promise封装axios
   3. appmodule和使用的地方引入HttpserviceService
   4. 并在构造函数中声明HttpserviceService

   this.httpservice.axiosGet(api)
   

7. 路由

• 根路由模块引入注入组件，路由模块引入组件
• 通过router-outlet挂载动态组件
• 模版里使用a标签router-link进行跳转（ng-router-link）
• path: '**'匹配任意路由， redirectTo：'默认路由'
• routerLinkActive设置路由选中样式
• 动态路由，传参的四种方式

8. 管道
   日期转化

  {{ today | date: 'yyyy-mm-dd HH:mm:ss' }}

自定义管道