Angular路由导航的7个步骤
路由过程的7个步骤每次点击链接或浏览器URL改变时,Angular路由器都会确保应用程序做出相应的反应。 为了做到这一点,Angular路由器执行以下7个步骤的顺序:
记住这7个步骤,您可以使用助记PRIGRAM,其中每个字母代表路由过程中的一步:
在我们深度了解每一步之前,让我们回顾一下,Angular路由器的使用术语。 术语路由服务(router service): 我们应用程序中的Angular全局路由服务 路由器配置(router configuration):我们应用程序中的所有可能的路由器状态的定义 路由器状态(router state):路由器在某个时间点的状态,表示为激活的路由快照树。 激活的路由快照(activated route snapshot):提供对路由器状态节点的URL、参数和数据的访问 守护(guard):在加载、激活或停用路由时运行的脚本(script)。 解析器(resolver):在请求页面被激活之前获取数据的脚本 路由器插座(router outlet):在DOM中,Angular路由器可以放置激活组件的位置 URL片段(URL segments):URL斜杠部分 如果你不熟悉Angular路由器或任何这些术语听起来陌生,我强烈建议你先阅读Use Angular router to resolve data,官方路由指导或Angular主力作者Victor Savkin的书Angular Router 步骤1 解析浏览器URL就Angular路由器而言,浏览器URL是表示路由器状态的字符串。由于路由器状态是一棵树,Angular路由器本质上考虑了浏览器URL的序列化树。 在路由过程的第1步中,Angular路由器将浏览器URL解析为URL树。 URL树是一种数据结构,稍后将帮助Angular路由器识别步骤3中的路由器状态树。 为了解析URL,Angular使用以下约定:(注:冒号前面是路由器出口,后面是URL片段)
例如,在解析下面的URL时: /section-one;test=one/(nav:navigation;test=two//main:about;test=three)?query=four#frag angular识别出以下部分(点击这里获取更大的版本):
矩阵参数的范围是在路由同级(Matrix parameters are scoped on a route level. )。不同的路由可以具有相同名称和不同值的矩阵参数。 相反,查询字符串参数和URL片段的范围不在路由同级(query string parameters and the fragment are not scoped on a route level)。它们通过路由共享,因此它们的名称应该是唯一的。 一旦Angular路由器组装了URL树,它将继续到步骤2。 步骤2 重定向在Angular路由器使用URL树创建路由器的状态之前,它会检查对应的重定向规则。 有两种不同的重定向类型:
Angular路由器遍历路由器配置。一旦找到匹配的重定向,重定向就被应用,路由器继续到步骤3。 只有一种重定向规则被应用! 如果路由1重定向到路由2,路由2重定向到路由3,然后路由2重定向路由3不执行,路由2被激活。(If route 1 redirects to route 2,which in turn redirects to route 3,then the second redirect to route 3 is not performed and route 2 is activated.) 步骤3 识别路由器状态此时,Angular路由器拥有一个潜在重定向应用程序的URL树。 Angular路由器遍历URL树,并与路由器配置中配置的路径匹配URL片段。 如果URL片段与路由的路径匹配,则路由的子路由与剩余的URL片段匹配,直到所有URL片段匹配为止。 如果没有找到完全匹配的路由器,回溯到在下一个兄弟的路由找到匹配。 思考下面的路由器配置: [ { path: 'one',component: OneComponent,children: [ { path: 'two/three',component: OtherComponent ] } ] 和下面的URL: /one/two/three 然后Angular路由器会找到一个由两条路由组成的匹配:
一旦Angular路由器找到一个完整的匹配,消耗所有的URL段,路由器状态被构造,路由器继续到步骤4。
如果整个路由器配置被处理且没有匹配,则路由器导航失败并记录错误。 步骤4 路由守卫 - 运行路由守卫现在Angular路由器知道要路由哪个路由器状态,它就运行相关的守护程序来检查是否允许导航到新的路由器状态。 首先,它从'最深的子路由'到'顶级'的顺序运行下面的守卫进程:
然后, 它从'顶级'到'最深的子路由'的顺序运行下面的守卫进程:
如果新的路由器状态需要一个模块被延迟加载,那么下面的守护进程也是运行的:
一个守护者必须返回一个布尔值或一个承诺/可观察到的值,该值解析为布尔值。 当守护进程返回false值,导航就会被取消。 如果没有一个守卫返回一个false值,Angular路由器继续到步骤5。 步骤5 Resolve - 运行resolvers因为Angular路由器知道新的路由器的状态可以被激活,它运行相关的resolvers。 在配置过程中,可以使用路由的数据属性将静态数据附加到路由: { path: 'one',data: { name: 'Jazz' } } 它允许你在运行时动态地解析数据。然后将新解析的数据合并到数据属性中的现有静态数据中: path: 'one',data: { name: 'Jazz' },resolve: { // Return value of AddressResolver will be merged in data // and will be available as data.address address: AddressResolver } resolver 是一个函数或类,具有一个返回值、一个承诺或一个可观察对象。如果解析器返回一个承诺或一个可观察对象,Angular路由器在它继续到步骤6之前等待它完成。 一旦所有的resolve都已完成,其返回值是合并的路径的data property,然后Angular路由器继续步骤6。 步骤6 激活组件在这步里,Angular路由器实例化所需组件并将它们放在DOM中 如果一个组件已经在以前的路由器状态实例化过或者仅仅路由参数发生改变,那么组件就不会重新实例化。但是组件同样被重新激活( reactivated ),而且新的参数可以通过可观察对象activatedroute进行使用。 当所有组件被实例化或重新激活时,Angular路由器会更新浏览器URL中的URL。 步骤7 管理导航最后,当新的路由器状态被显示到屏幕上时,Angular路由器侦听URL更改和状态更改。 一旦发生下列情况之一:
Angular路由器重复整个过程。 总结在这篇文章中我们学到了当用户导航从一个页面到另一个的时候,Angular路由器都做了哪些过程。 你可以使用助记 PRIGRAM:
记住Angular路由器经过的步骤的顺序。 了解这个过程将有助于您更好地了解幕后发生的事情,并帮助您调试潜在的路由问题。 下次有人问你,Guard之前或Resolve之后发生了什么,你会知道该说什么。 希望有读者喜欢! 参考资源
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |