- 基本语法
- *ngFor
- *ngIf
- 父子组件通信
- 子组件调用父组件的数据 :父组件传入[title] = 'title',子组件@input接收之后通过this直接使用
- 子组件调用父组件的方法:同上
- 父组件调用子组件的数据:
- 子组件#footer命名,父组件@viewChild引入,通过this.footer.*使用
- 子组件暴露一个 EventEmitter属性,当事件发生时,子组件利用该属性
emits
(向上弹射)事件。父组件绑定到这个事件属性,并在事件发生时作出回应。
- 父组件调用子组件的方法
- 非父子组件数据共享
生命周期
-
rxjs:是一种针对异步数据流的编程
异步编程:- 回调函数callback
- promise
-
rxjs,写法与promise基本相同resolve->observer.next, then->subscribe
- unsubscribe可以取消执行操作
-
promise无法执行多次,rxjs可以执行多次
- 通过pipe使用工具函数map、filter
-
接口请求
- get方式
在app.module.ts中引入HttpClientModule并注入
在使用的地方从common/http中引入httpClient,并在构造函数中声明httpClientthis.http.get(api ).describe(response:any)=> {}
- post 提交数据
在app.module.ts中引入HttpClientModule并注入
在使用的地方从common/http中引入httpClient、HttpHeaders并在构造函数中声明httpClientlet 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
- promise封装axios
- appmodule和使用的地方引入HttpserviceService
- 并在构造函数中声明HttpserviceService
this.httpservice.axiosGet(api)
路由
- 根路由模块引入注入组件,路由模块引入组件
- 通过router-outlet挂载动态组件
- 模版里使用a标签router-link进行跳转(ng-router-link)
- path: '**'匹配任意路由, redirectTo:'默认路由'
- routerLinkActive设置路由选中样式
- 动态路由,传参的四种方式
- 管道
日期转化
{{ today | date: 'yyyy-mm-dd HH:mm:ss' }}
自定义管道