Angular 学习小记

关于数据或事件绑定的一些语法

() 是事件绑定;[] 是属性绑定;[()] 是双向绑定,除了属性绑定外,默认会绑定到 xxxChange 事件;[(ngModel)] 也是双向绑定。

@Input() 用于声明组件接受的属性,类似于 React 的 props. @Output 声明组件对外暴露的事件。可以被消费方以 () 的形式注册 handler 使用。

依赖注入

Angular 框架实现了依赖注入功能。任何服务默认都声明为 Injectable(). 注入器(injector) 默认是 root. 也可以通过 NgModule 或 providers 等方式定义注入器。整个应用的注入器是支持多层级的结构的。对象在注入器中存取,使用 DI token 作为 key. 有时候这个 token 就是对象类型。

对象注入可以声明为 @Optional() 的,对于可选的注入对象,在使用端就要判断是否为空后再使用。

组件如何互相访问

Angular 中没有组件树,因此组件没法直接访问其他组件。但是有视图树。

每个组件对应于一个 host view 和一个 embedded view.

父子组件也可以通过依赖注入的方式进行访问,通过接口注入。

Http 访问

Angular 使用内建的 HttpClient 类来实现 http 访问。其返回值是 Rx 的 Observable 对象,因此可以被方便的订阅消费 (subscribe). 同时,还可以结合 pipe 实现更复杂的功能。基于 Rx 的 observable 的写法可以理解为 http 请求处理流程的定义蓝图(blue print),仅仅当 subscribe 的时候,才会触发真正的执行。

HttpClient 类还支持定义拦截器(interceptors). 从而实现一些中间件的功能,如附加身份认证/或其他功能所需要的 http 请求头(通过克隆并修改请求对象);日志;缓存等功能。

利用 rx 的操作符还可以实现防抖(debounce). 即,在用户输入停止一段时间后才真正发出请求,防止频繁的快速输入触发大量的 http 请求。

HttpClient 对不支持 CORS 协议的服务器,可以进行 jsonp 通信。另外,需要知道如何设置 XSRF 防护。

路由

https://angular.cn/guide/router

  • 路由表的定义
  • routerLink 属性
  • 输出区域
  • 嵌套子路由
  • lazy 加载
  • 路由守卫 (guard)
原文地址:https://www.cnblogs.com/new-start/p/13342195.html