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 组件交互(三)投影

Puppeteer 页面切换

Photo by Sora Sagano on Unsplash

很多时候,我们需要利用 Puppeteer 进行页面切换。比如点击某个按钮,打开

了一个新的页面(<a target=’blank’>),此时我们想切换到新开的页面,那

么这就涉及到了页面的切换。虽然在某些场景下,我们可以通过页面修改元素

属性的方式来阻止跳转避免页面切换。但是在某些场景下,直接切换页面会来

的更加容易。

继续阅读Puppeteer 页面切换

Angular 组件交互(二)@Input

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

其中父组件数据流向子组件这一过程叫做属性绑定(property binding)。

在 Angular 中实现属性绑定的方法有很多,其中一种是利用 @Input 修饰符。

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