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

1 回答

• 5

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

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

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

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

  Now you navigate to a/b.

  路由器将：

  • 实例化 { path: 'a', component: AComponent, children: [] } 路线

  • 实例化 { path: 'b', component: BComponent } 路线

  • 通过将这些路线附加到相应的 router-outlet 位置来激活这些路线

  • 使用this approach实例化 AComponent 和 BComponent

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

  Now you navigate to a/n1.

  路由器将：

  • 重用路由 a - { path: 'a', component: AComponent, children: [] } route（无实例化或激活）

  • 实例化 { path: ':name', component: DComponent } 路线

  • 激活 { path: ':name', component: DComponent } 路线

  • 重用 AComponent 实例（无实例化或激活）

  • 实例化 DComponent 实例

  • 激活 DComponent ，将其附加到 AComponent 视图中的 router-outlet

  Now you navigate to a/n2.

  路由器将：

  • 重用路由 a - { path: 'a', component: AComponent, children: [] } route（无实例化或激活）

  • 重用路由 n2 - { path: ':name', component: DComponent } route（无实例化或激活）

  • 更新 n2 激活路线的参数

  • 重用 DComponent 实例（无实例化或激活）

  回复于 2024-04-28T12:43:35+08:00