关于Angular中的routerLink和演示组件的最佳实践是什么？

Question

像许多其他人一样，我也喜欢将组件分为容器（智能）组件和表示（哑）组件。当然，我也喜欢我的应用程序使用路由器，以便用户轻松浏览应用程序，为特定页面添加书签（或者我应该说状态？）等。

我真正希望用户拥有的一项功能是能够在新选项卡中打开链接或直接复制链接的URL。所以很明显，我使用了Angular的RouterModule提供的routerLink指令。但这将我带到一个概念性的问题，我不确定该如何解决。

假设我定义了以下路线和组件：

'/heroes'  --> HeroesPageComponent (contains a <router-outlet>)
    ''     --> HeroesListPageComponent (contains <heroes-list> component)
    '/:id' --> HeroesDetailPageComponent (contains <hero-detail> component)

页面组件是“智能组件”，它们从路由器获取所需的数据（如ID）并获取数据，然后将它们简单地传递给作为表示组件的子级（HeroesListComponent和HeroDetailComponent）。

在我的示例中，HeroesListComponent应该不了解其边界之外的应用程序，以使其在其他上下文中仍可重用（例如Angular Docs示例中的CrisisCenter）。但是在这种情况下，我希望显示的列表中的每个英雄都有指向“ / heroes /：id”的链接，以便用户可以在单独的选项卡/窗口中打开和编辑每个英雄。但是要使用routerLink构建此链接，组件将必须具有有关已配置路由以及在何种上下文中使用它的知识。这将使重用该组件变得相当困难。

有没有关于如何兼顾两全其美的最佳实践？关于如何在保持演示文稿组件愚蠢的同时允许它们为其他页面创建实际的href呢？

我希望我的例子足够清楚。如果没有，请告诉我:)

谢谢！

Answer 1

一个简单的解决方案是为哑子组件提供额外的输入属性，例如@Input() navigateTo: string;。routerlink 指令可以绑定到该值。
这样，只有父元素需要了解已配置的路由。它向每个列出的子项传递了 2 个属性：显示值和导航目标。