Angular 变更检测 – 深入 OnPush

Photo by Manson Yim on Unsplash

普通策略组件中,引用和事件都会触发 Angular 变更检测。这种策略下,Angular 不会去判断是否应该做而是直接做,因此在一些数据变更比较频繁的场景会有效率问题。为了解决这个难题,OnPush 策略应运而生。在 OnPush 变更检测策略下,引用和部分事件的变化并不会引起变更检测,具体来说:

引用变化

若输入数据的引用没有发生改变,那么这个组件仍然不会触发变更检测更新视图。可以使用 immutable-js 来避免输入数据的引用没有发生变化,从而确保变更检测的发生。

事件触发

和采用 Default 策略的普通组件不同,在 OnPush 策略下,部分事件的触发,并不会主动触发变更检测。包括:setTimeout、setInterval、 Observable、Subscription、Promise.resolve().then() 、 Promise.reject().then() 。

继续阅读Angular 变更检测 – 深入 OnPush

模板驱动与响应式表单区别

Angular 提供了响应式与模板驱动两种方式来处理表单数据,两者的区别在于:

模板驱动表单

1.使用简单。模板上直接使用双向绑定即可。

2.由于第一点,因此组件上的代码就会相应减少。

3.适用于简单表单及简单场景。

4.不利于单元测试

响应式表单

1.使用比较麻烦。

2.代码集中于组件上。

3.适用于复杂表单及场景。

4.更利于单元测试。

参考链接

What are the practical differences between template-driven and reactive forms?

What are the differences between template driven forms and reactive forms in angular 2

Angular 路由——实现样式切换

在登陆界面可能我们想要样式 A,在登录后的仪表盘界面我们想要样式 B。在 Angular 中,我们可以通过路由机制来实现这个效果。

路由与子路由实现样式切换

路由的本质上是 URL 到组件的映射。对于不同样式,我们可以把它分别设计为不同的组件。然后可以把同一个样式的页面放到对应样式中作为子组件。最后通过路由进行映射,实现不同样式页面的共存。

具体来说,针对不同的样式编写不同的组件,顶层通过单个 <routoulet> 实现不同样式组件的导航。在样式组件中再次放置<routoulet>,并通过子路由的形式把相关的组件映射到这个样式组件中,如下所示。

这个在线例子通过这种方法实现不同样式间页面的切换。

参考链接

How to switch layouts in Angular2

Angular 路由——实现认证登录

Angular 路由 CanActive 属性可以帮助我们在此实现一些逻辑,来决定用户是否可以访问这个路由。它也是路由守卫的一种。

CanActive

CanActive 属性对应的是一个实现了 CanActive 接口的服务。这里是 AuthGuard。

AuthGuard 在实现 CanActive 接口中返回一个布尔值(或相关其他重载)来告诉 Angular 是否应该激活这个路由。

参考链接

CanActive 官方文档

Angular 自定义双向绑定

ngModal 是 Angular 最常用接触到的双向绑定的语法。但是如何自定义一个双向绑定?在 Angular 中,我们可以很方便地使用内置语法来实现。

自定义双向绑定

双向绑定其实是属性绑定和事件绑定的语法糖。。若我们在组件中定义了这样两个形式的变量: @Input() xxx 和 @Output() xxxChange。

那么我们采用如下方式在这个组件上使用双向绑定语法。

Angular 在模板解析的时候会自动将此语法展开,如下所示。

(完)

参考链接

Create your own two-way data binding in Angular

Angular 项目框架更新

Photo by Harley-Davidson on Unsplash

Angular 作为一个版本变化比较快的框架,其所应用的项目保持相应的更新是非常重要的一个任务。新的版本往往带来了新的功能,修补了一些漏洞,官方文档也建议及时对 Angular 项目进行更新。

安装 @angular/cli

@angular/cli 可以让更新变得更加容易。首先,我们需要安装 @angular/cli 的最新版本,这样我们可以拥有此工具的最新功能。

ng update 更新项目

使用 @angular/cli 的 ng update 指令可以方便地更新项目。键入此指令时,由于一些包的依赖与即将升级的 Angular 版本有冲突,此时它会提示你是否需要强制执行。这边推荐使用 ng update –force 指令强制升级,然后再依次更新有冲突的依赖包,最后检查一下项目运行是否正常。

推荐使用 nrm taobao 来加快更新的速度。

Angular 指令快速入门

Photo by Daniel Radford on Unsplash

声明

本文重点不再讨论 Angular 中内置指令以及如何自定义指令。而是想让读者知道 Angular 中指令的作用,它解决了什么问题,以及指令与组件的区别。

何为指令

Angular 中指令是一个非常特殊的存在,从使用方法来看,指令类似元素的一个自定义属性,为元素或者组件提供特定的功能。在大多数场景下,指令不对作用的宿主元素本身的类型做任何假设,它无需知道宿主元素中包含了那些内容,宿主元素上有哪些属性,也不依赖宿主上的其他功能。换句话说,若我们想给 HTML 元素或者组件拓展某项功能,且这项功能相对独立,就可以采用指令来实现。

继续阅读Angular 指令快速入门