Angular 在不同的路由中重用组件

Question

我有以下路线，id 是一个可选参数，因此用户可以加载信息，或者如果没有提供 id，他们可以添加信息。我希望能够重用组件，这样页面就不必重新加载（api 在 ngOnInit 中调用）但是因为它们是两条独立的路由 angular 总是创建一个全新的组件而 ngOnInit 是打电话。

我试过使用 children 但还是遇到同样的问题

（这是 angular 4 路由器）

const routes: Routes = [
  {
    path: 'stuff/info',
    component: InfoComponent,
  },
  {
    path: 'stuff/info/:id',
    component: InfoComponent,
  },
]

Answer 1

Angular 具有必需参数、可选参数和查询参数。您定义的 "optional" 参数不是 "optional"，因为 Angular 定义了可选参数。对于 "true" 可选参数，您不需要将它们定义为路由配置的一部分。所以你可以像这样用 stuff/info 定义一条路线：

const routes: Routes = [
  {
    path: 'stuff/info',
    component: InfoComponent,
  }
]

然后您可以使用 .navigate 或 routerLink 添加可选参数，如下图所示。

注意：从 Angular 4 开始，这应该是

this.route.snapshot.paramMap.get('start')

或者，您可以始终传递 id，并在创建时传递 0 或其他已知值。我在这里有一个完整的例子：https://github.com/DeborahK/Angular-Routing

Angular 在不同的路由中重用组件

Angular Reuse Component in different routes

angular

angular-router