不同路线中的 Angular 重用组件

Question

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

我尝试过使用儿童，但仍然遇到同样的问题

（这是 angular 4 路由器）

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

Answer 1

Angular 具有必需、可选和查询参数。您定义的“可选”参数不是“可选”，因为 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