不同路由中的 Angular Reuse Component

Question

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

我已经尝试过使用 children 但仍然遇到同样的问题

(这是带 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('开始')

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