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

Question

我有以下路由，其中id是可选参数，所以用户可以加载信息，或者如果没有提供id，则可以添加信息。我想能够重用该组件，以便页面无需重新加载（在ngOnInit中进行api调用），但是因为它们是两个独立的路由，Angular总是创建一个全新的组件并调用ngOnInit。

我尝试过使用children，但仍然存在同样的问题。

（这是使用Angular 4路由器）

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

- allanjwalter

---

你这样做有没有遇到任何错误？ - Vamshi

@allanjwalter 请编辑您的问题，附上这段代码出现的错误。 - Parth Mahida

没有错误，我在问题中清楚地描述了问题，即Angular不重用组件。 - allanjwalter

Answer 1

Angular有必填、可选和查询参数。您定义的“可选”参数并不像Angular定义的可选参数那样是可选的。对于真正的可选参数，您不需要将它们定义为路由配置的一部分。因此，您可以只定义一个路由，例如：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

- DeborahK

---

这个很好，谢谢。顺便问一下，是否可以从外部源通过链接传递这些参数，这种情况下它们会以某种方式显示在URL中？ - allanjwalter

我不确定我完全理解了？但是如果你的意思是是否可以从你的博客（例如）链接到www.mysite.com/stuff/info;id=15，那么是的。Angular路由支持所谓的“深度链接”。您只需要正确设置服务器以执行URL重写，以便允许Angular应用程序处理URL即可。 - DeborahK