Angular Routing:实例创建与实例激活

问题描述

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

The Angular Routing docs mention component instance creation, component instance activation, and route activation.

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

The docs do not explain the differences of these concepts, and when each creation/activation occurs.

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

总结:不清楚组件实例activation和路由activation的真正含义，以及它与组件实例的关系创造(特别是时间方面).

In summary: It is not clear what is really meant by component instance activation and route activation, and how that relates to component instance creation (particularly timing wise).

实例创建

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

实例激活

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

路由激活

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

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

Here are some mentions of the above three concepts, in the Angular docs:

实例创建

默认情况下，路由器会重用组件实例重新导航到相同的组件类型而不访问不同的组件优先.

...

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

This application won't re-use the HeroDetailComponent. The user alwaysreturns to the hero list to select another hero to view. There's noway to navigate from one hero detail to another hero detail withoutvisiting the list component in between. Therefore, the router createsa new HeroDetailComponent instance every time.

链接

实例激活

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

链接

当应用程序请求导航到路径/crisis-center 时，路由器激活 CrisisListComponent 的一个实例，显示其查看并更新浏览器的地址位置和历史记录该路径的网址.

链接

路由激活

第三条路由中的data属性是任意存放的地方与此特定路线相关的数据.数据属性是可在每个激活的路线内访问.

链接

您还可以使用 CanActivateChild 保护来保护子路由.这CanActivateChild 守卫类似于 CanActivate 守卫.钥匙不同之处在于它在任何子路由被激活之前运行.

链接

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

链接

ActivatedRouteSnapshot 包含未来的路由激活并且 RouterStateSnapshot 包含未来的 RouterState申请，如果你通过守卫检查.

链接

推荐答案

实例化意味着创建路由(ActivateRoute)或组件的实例.激活路由意味着将其附加到路由器出口指令.激活一个组件意味着将它附加到 DOM.路由和组件使用

通过将 AComponent 和 BComponent 添加到 DOM 来激活它们

• instantiate { path: 'a', component: AComponent, children: [] } route
• instantiate { path: 'b', component: BComponent } route
• activate these routes by attaching them to the respective router-outlet locations
• instantiate AComponent and BComponent using this approach
• activate AComponent and BComponent by adding them to DOM

现在您导航到 a/n1.

Now you navigate to a/n1.

路由器将:

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

• reuse route for a - { path: 'a', component: AComponent, children: [] } route (no instantiation or activation)
• instantiate { path: ':name', component: DComponent } route
• activate { path: ':name', component: DComponent } route
• reuse AComponent instance (no instantiation or activation)
• instantiate DComponent instance
• activate DComponent by attaching it to the router-outlet in AComponent view

现在您导航到 a/n2.

Now you navigate to a/n2.

路由器将:

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

• reuse route for a - { path: 'a', component: AComponent, children: [] } route (no instantiation or activation)
• reuse route for n2 - { path: ':name', component: DComponent } route (no instantiation or activation)
• update params for the n2 activated route
• reuse DComponent instance (no instantiation or activation)

这篇关于Angular Routing:实例创建与实例激活的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！