角度路由:实例创建与实例激活

Question

Angular Routing文档提到了组件实例创建,组件实例激活和路由激活.

文档没有解释这些概念的差异,以及何时发生每个创建/激活.

---

问题

1. 实例创建和实例激活之间有什么区别？
2. 实例激活和路由激活之间有什么区别？
3. 实例激活是否始终与实例创建同时发生？

总结:目前尚不清楚组件实例激活和路由激活的真正含义,以及它与组件实例创建的关系(特别是时序方面).

---

已知信息

实例创建

• 当在不同类型的组件之间导航时,组件实例由Angular创建
• 在同一组件的实例之间导航时,默认情况下会重复使用这些实例

实例激活

• 当浏览器的位置URL更改为匹配路径段(例如/ crisis-center)时,路由器会激活相应组件的实例(例如CrisisListComponent)并显示其视图
• 当应用程序请求导航到路径(例如/危机中心)时,路由器激活相应组件的实例(例如CrisisListComponent),显示其视图,并使用该路径的URL更新浏览器的地址位置和历史记录

路线激活

• 在整个文档中提到了一些地方.见下文

---

Angular Doc References

以下是Angular文档中对上述三个概念的一些提及:

实例创建

默认情况下,路由器在重新导航到相同的组件类型时重新使用组件实例,而不首先访问其他组件.

...

此应用程序不会重复使用HeroDetailComponent.用户始终返回到英雄列表以选择要查看的另一个英雄.没有访问其中的列表组件,无法从一个英雄细节导航到另一个英雄细节.因此,路由器每次都会创建一个新的HeroDetailComponent实例.

链接

实例激活

当浏览器的位置URL更改为与路径段/危机中心匹配时,路由器将激活 CrisisListComponent 的实例并显示其视图.

链接

当应用程序请求导航到路径/危机中心时,路由器会激活 CrisisListComponent 的实例,显示其视图,并使用该路径的URL更新浏览器的地址位置和历史记录.

链接

路线激活

第三条路径中的data属性是存储与此特定路由关联的任意数据的位置.在每个激活的路由中都可以访问data属性.

链接

您还可以使用CanActivateChild防护来保护子路线.CanActivateChild后卫与CanActivate后卫相似.关键的区别在于它在激活任何子路由之前运行.

链接

在英雄细节和危机细节中,应用程序一直等到路线被激活以获取相应的英雄或危机.

链接

如果您通过保护检查,ActivatedRouteSnapshot包含将被激活的未来路由,并且RouterStateSnapshot包含应用程序的未来RouterState.

链接

Answer 1

实例创建和实例激活之间有什么区别？

实例化意味着创建路由(ActivateRoute)或组件的实例.激活路由意味着将其附加到router-outlet指令.激活组件意味着将其附加到DOM.使用router-outlet指令的activateWith函数激活路由和组件.

我们来看一些例子.假设您有以下路线:

{
    path: 'a',
    component: AComponent,
    children: [
        { path: 'b', component: BComponent },
        { path: ':name', component: DComponent }
    ]
}

现在你导航到a/b.

路由器将:

• 实例化{ path: 'a', component: AComponent, children: [] }路线
• 实例化{ path: 'b', component: BComponent }路线
• 通过将这些路线附加到相应router-outlet位置来激活这些路线
• 实例化AComponent并BComponent使用这种方法
• 激活AComponent并将BComponent它们添加到DOM

现在你导航到a/n1.

路由器将:

• 重用路由a- { path: 'a', component: AComponent, children: [] }路由(没有实例化或激活)
• 实例化{ path: ':name', component: DComponent }路线
• 激活{ path: ':name', component: DComponent }路线
• 重用AComponent实例(没有实例化或激活)
• 实例化DComponent实例
• 激活DComponent通过将其附接到router-outlet在AComponent视图

现在你导航到a/n2.

路由器将:

• 重用路由a- { path: 'a', component: AComponent, children: [] }路由(没有实例化或激活)
• 重用路由n2- { path: ':name', component: DComponent }路由(没有实例化或激活)
• 更新n2激活路线的参数
• 重用DComponent实例(没有实例化或激活)