Angular 结构型指令原理

Photo by Olivier Collet on Unsplash

声明

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

结构型指令与属性型指令的区别。

前言

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

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

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

图的基本方法。

继续阅读Angular 结构型指令原理

Angular 路由快速教程

Photo by Harley-Davidson on Unsplash

声明

这个教程的目标是让初学者快速掌握 Angular 路由的基本使用方法,避免复杂

的概念影响对路由基本用法的认识,因此只涉及路由模块导入、路由匹配算

法、路由跳转指令,并不涉及守护路由、子路由,解析路由(resolver),路

由参数的获取等高级路由知识 。

前言

路由是一个 Web 应用不可缺少的一环, 路由的存在可以让用户对应用中感兴

趣的内容进行收藏方便下次访问。 在单页应用程序(SPA)中,路由必须由前

端来处理。Angualr 提供了功能强大的路由模块,可以帮我们完成复杂的页

面路由需求。

对于一个正常的 Web 应用来说,当一个路由发生时,会触发两个方面的变化,

一是浏览器中的地址会发生改变,二是页面局部或者全部会发生改变。

为了做到这两点,Angular 通过监听浏览器地址的改变来触发页面的渲染。这

其中的关键要数 “占位符” 和路由匹配的用法!

那就让我们开始吧~

继续阅读Angular 路由快速教程

Agular 组件交互(三)投影

Photo by Cristofer Jeschke on Unsplash

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

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

但是在很多场合,我们需要解决组件中视图层的复用问题。

我们希望能将父组件的某组内容嵌入在子组件中,由子组件负责展示。

对于这个问题,Angular 提出了投影(project)的概念。

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