angular-路由与导航部分梳理

最新推荐文章于 2022-11-07 15:02:13 发布

weixin_34408717

最新推荐文章于 2022-11-07 15:02:13 发布

阅读量133

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/hyzccc/blog/1839581

版权

<base herf>元素带路由的应用都要在index.html上的<head>标签下添加一个<base>元素，来告诉路由该如何合成导航用的URL,如<base herf="/">
Angular的路由是一个可选的服务，用来呈现URL所对应的视图，并不是Angular核心的一部分，而是在它自己的包中： import { RouterModule, Routes } from '@angular/router';
路由配置，定义路由后，在app.module.ts的imports中，用RouterModule.forRoot()来配置路由；（先引入RouterModule），在特性模块中，配置路由时，只能改用RouterModule.forChild();<br>

将{*enableTracing:true}作为第二参数传给RouterModule.forRoot()可以将每个导航生命周期的事件初出道浏览器的控制台；
路由出口：<router-outlet></router-let>,在根级模板中配置，比如：body;路由器会把它添加到DOM中，紧接着在它之后插入到导航到的视图元素；
routerLink可以绑在<a>标签上，根据用户操作导航；<a routerLink="/"></a>
路由器状态：在导航时的每个生命周期成功完成时，路由器会构建出一个 ActivatedRoute 组成的树，它表示路由器的当前状态。可以在应用中的任何地方用 Router 服务及其 routerState 属性来访问当前的 RouterState 值。 RouterState 中的每个 ActivatedRoute 都提供了从任意激活路由开始向上或向下遍历路由树的一种方式，以获得关于父、子、兄弟路由的信息。paramMap:包含一个当前路由的必要参数和可选参数组成的Map对象；queryParamMap：包含一个对所有路由都有效的查询参数组成的map对象；

如果确定哪个组件得实例永远不会复用，可以使用快照（Snapshot）来作为Observable得替代品；this.route.snapshot.paramMap.get('id');
路由守卫：使用情况：该用户可能无权导航到目标组件；可能用户得先登陆认证；在显示目标组件前，你可能要先保存数据；在离开组件前，你可能要先保存修改；你可能要询问用户：你是否要放弃本次修改，而不用保存；
守卫返回一个值：
- 如果返回true，导航过程会继续；
- 返回false,导航过程会终止，守卫返回一个值：且用户留在原地；
在分层路由的每个级别上，都可以设置守卫；路由器会先按照从最深的子路由由下往上检查的顺序来检查 CanDeactivate() 和 CanActivateChild() 守卫。然后它会按照从上到下的顺序检查 CanActivate() 守卫。如果特性模块是异步加载的，在加载它之前还会检查 CanLoad() 守卫。如果任何一个守卫返回 false，其它尚未完成的守卫会被取消，这样整个导航就被取消了；
惰性加载优点：