javascript - Angular 路由 : Instance Creation vs Instance Activation

Question

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

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

---

问题

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

总结:不清楚组件实例激活和路由激活的真正含义，以及它们与组件实例的关系创作(尤其是时间安排)。

---

已知信息

实例创建

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

实例激活

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

路由激活

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

---

Angular 文档引用

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

实例创建

By default, the router re-uses a component instance when it re-navigates to the same component type without visiting a different component first.

...

This application won't re-use the HeroDetailComponent. The user always returns to the hero list to select another hero to view. There's no way to navigate from one hero detail to another hero detail without visiting the list component in between. Therefore, the router creates a new HeroDetailComponent instance every time.

Link

实例激活

When the browser's location URL changes to match the path segment /crisis-center, then the router activates an instance of the CrisisListComponent and displays its view.

Link

When the application requests navigation to the path /crisis-center, the router activates an instance of CrisisListComponent, displays its view, and updates the browser's address location and history with the URL for that path.

Link

路由激活

The data property in the third route is a place to store arbitrary data associated with this specific route. The data property is accessible within each activated route.

Link

You can also protect child routes with the CanActivateChild guard. The CanActivateChild guard is similar to the CanActivate guard. The key difference is that it runs before any child route is activated.

Link

In the Hero Detail and Crisis Detail, the app waited until the route was activated to fetch the respective hero or crisis.

Link

The ActivatedRouteSnapshot contains the future route that will be activated and the RouterStateSnapshot contains the future RouterState of the application, should you pass through the guard check.

Link

Answer 1

What is the difference between instance creation and instance activation?

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

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

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

现在您导航到 a/b。

路由器将:

• 实例化{ path: 'a', component: AComponent, children: [] } route
• 实例化{ path: 'b', component: BComponent } 路由
• 通过将它们附加到相应的router-outlet 位置来激活这些路由
• 使用this approach 实例化AComponent 和BComponent
• 通过将 AComponent 和 BComponent 添加到 DOM 来激活它们

现在您导航到 a/n1。

路由器将:

• 为 a 重用路由 - { path: 'a', component: AComponent, children: [] 路由(无实例化或激活)
• 实例化{ path: ':name', component: DComponent } 路由
• 激活{ path: ':name', component: DComponent } 路由
• 重用AComponent实例(没有实例化或激活)
• 实例化DComponent实例
• 通过将 DComponent 附加到 AComponent View 中的 router-outlet 来激活它

现在您导航到 a/n2。

路由器将:

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