Angular 路由——实现样式切换

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

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

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

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

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

参考链接

How to switch layouts in Angular2

Angular 路由快速教程

Photo by Harley-Davidson on Unsplash

声明

这个教程的目标是让初学者快速掌握 Angular 路由的基本使用方法,避免复杂的概念影响对路由基本用法的认识,只涉及路由模块导入、路由匹配算法、路由跳转指令,并不涉及守护路由、子路由,解析路由(resolver),路由参数的获取等高级路由知识 。

前言

路由是一个 Web 应用不可缺少的一环, 路由的存在可以让用户对应用中感兴趣的内容进行收藏方便下次访问。 在单页应用程序(SPA)中,路由必须由前端来处理。Angualr 提供了功能强大的路由模块,可以帮我们完成复杂的页面路由需求。

对于一个正常的 Web 应用来说,当一个路由发生时,会触发两个方面的变化,一是浏览器中的地址会发生改变,二是页面局部或者全部会发生改变。为了做到这两点,Angular 通过监听浏览器地址的改变来触发页面的渲染。这其中的关键要数 “占位符” 和路由匹配的用法!

那就让我们开始吧~

继续阅读Angular 路由快速教程

Angular 路由匹配教程

Photo by Roland Kay-Smith on Unsplash

Angular Router 是 Angular 最重要的内置模块之一。利用它可以非常快速的生成路由规则,实现前端模块化开发。但是其中有一些细节值得关注。在本篇中,我会重点介绍 Angular Router 中——路由匹配的概念。

继续阅读Angular 路由匹配教程