Angular 指令之 NgFor 教程

声明

NgFor 内建指令可以帮助开发者快速迭代某个数组来创建多个 DOM 元素。在

实际开发中,我发现全面掌握 NgFor 的用法可以很好地帮助我们应对更加复杂

的场景,甚至能实现性能的提升。此教程中涉及到了 Angular 变化检测机制的

内容,对于这一部分感兴趣的朋友可以参看我其他的博文

继续阅读Angular 指令之 NgFor 教程

Angular NgIf 指令原理

Photo by Olivier Collet on Unsplash

声明

本节内容假设您具有基本的组件概念、了解 Angular 内置组件的基本用法以及

结构型指令与属性型指令的区别。关于指令是什么/有什么作用,可以参看这篇

指令二三问

前言

在 Angular 入门系列教程中,已经提到 Angular 的一些内建指令。其中利用

内建的结构型指令,我们可以方便地来控制视图的创建和销毁。本文从 ngIf 源

码入手,带你了解 ngIf 的解析过程、页面视图增删原理,从而掌握动态增删视

图的基本方法。

继续阅读Angular NgIf 指令原理

Agular 组件交互(三)投影

Photo by Cristofer Jeschke on Unsplash

前面介绍了 Angular 如何利用 @Input @Output 来提高组件的复用性。但是

@Input @Output 只解决了组件中控制层数据复用的问题,但是在很多场合,

我们需要解决组件中视图层的复用问题。我们希望能将父组件的某组内容嵌入

在子组件中,由子组件负责展示。这就是投影(project)的概念。

继续阅读Agular 组件交互(三)投影

Angular 组件交互(二)@Input

前端组件化带来的需求就是前端框架必须能够实现父子组件之间的通讯。这种

数据从父组件流向子组件的过程也被称为属性绑定(property binding)。属

性绑定反映了 Angular 将组件中的变量与 DOM 元素一一对应的关系。通过属

性绑定可以将变量的变化实时传入其他组件中,由 Angular 变化检测和视图更

新机制将充当视图层与控制层的中间人,负责消息的传递和界面的更新。从而

实现视图层与控制层的解耦,减少代码维护,需求变更带来的开发成本。

既然属性绑定好处多多,现在就让我们来了解一下 Angular 属性绑定的关键成

员——@Input 修饰符。

继续阅读Angular 组件交互(二)@Input

Angular forRoot 详解

Photo by Jaanus Jagomägi on Unsplash

在Angular中,常常会看到在 AppModule 中调用某个模块的 forRoot 方法。

其中最常见的应该就是 RouterModule.forRoot()。但是 forRoot 的作用是什

么?什么时候要自己编写 forRoot?读完本文,相信你会有一个答案。

继续阅读Angular forRoot 详解

Angular Resolver 教程

Photo by Kristine Weilert on Unsplash

声明

本教程是 Angular 路由快速教程的后续章节。假设您已经拥有了一些 Angular

相关的基础路由知识,了解了 Angular 路由模块常见路由组件以及路由匹配的

基本方法,尚不清楚的同学建议复习一下路由相关知识

Resolver —— 路由的新机制

在很多时候,我们会在组件初始化的时候(ngOnInit 消息钩子)中预先抓取数

据。但是假如数据抓取耗时较长,会导致在组件渲染的时候数据还没拿到渲染

的数据(多数情况会在控制台报错)。为了避免这种情况,就要用到 Resolver

在路由到组件之前做数据的预抓取。

相比于直接在组件中注入服务,Resolver 可以将数据抓取与其他业务逻辑分离

开来,更加利于项目的维护和扩展。

这种做法也被称为遵循 “单一职责原则(single responsibility principle )”。

Angular 配置一个 Resolver 也非常简单。只需在路由匹配表中,为某一条路

由的 resolve 属性指定一个满足某种格式的服务,就可以轻松实现预抓取。

继续阅读Angular Resolver 教程