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

Question

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

文档没有解释这些概念的差异，以及每次创建/激活的时间。

问题

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

总结：目前尚不清楚组件实例激活和路由激活的真正含义，以及它与组件实例的关系创作（特别是时间安排）。

已知信息

实例创建

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

实例激活

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

路线激活

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

Angular Doc References

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

实例创建

  

默认情况下，路由器重新使用组件实例   重新导航到相同的组件类型，而无需访问其他组件   首先是组件。

     

...

     

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

Link

实例激活

  

当浏览器的位置网址更改为与路径段匹配时   / crisis-center，然后路由器激活一个实例   CrisisListComponent并显示其视图。

Link

  

当应用程序请求导航到路径/危机中心时，   路由器激活CrisisListComponent的实例，显示它   查看，并使用更新浏览器的地址位置和历史记录   该路径的网址。

Link

路线激活

  

第三条路线中的数据属性是存储任意的地方   与此特定路线相关的数据。数据属性是   可在每个激活的路径中访问。

Link

  

您还可以使用CanActivateChild防护保护子路线。该   CanActivateChild后卫与CanActivate后卫相似。钥匙   区别在于它在任何子路由被激活之前运行。

Link

  

在Hero Detail and Crisis Detail中，应用程序一直等到路线   被激活以获取相应的英雄或危机。

Link

  

ActivatedRouteSnapshot包含将来的路线   激活，RouterStateSnapshot包含未来的RouterState   如果您通过警卫检查，请参阅申请。

Link

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位置
来激活这些路线
• 使用this approach
实例化AComponent和BComponent
• 通过将其添加到DOM
来激活AComponent和BComponent

现在您导航到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实例（无实例化或激活）