Question

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

我真正希望用户拥有的一项功能是能够在新标签页中打开链接或直接复制链接的网址。显然我使用了由Angular的RouterModule提供的routerLink指令。但这让我想到了一个我不确定如何解决的概念性问题。

我们说我已经定义了以下路线和组件：

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

页面组件是＆＃34;智能组件＆＃34;它从路由器获取所需的数据（如ID）并获取数据，然后将数据传递给他们的子节点（HeroesListComponent和HeroDetailComponent），这些节点是表示组件。

在我的示例中，HeroesListComponent应该对其边界外的应用程序一无所知，以便在其他上下文中保持可重用（例如Angular Docs示例中的CrisisCenter）。但在这种情况下，我希望显示列表中的每个英雄都有一个链接到＆＃39; / heroes /：id＆＃39;这样用户就可以在单独的标签/窗口中打开和编辑每个英雄。但是要使用routerLink构建此链接，组件必须了解已配置的路由以及它在何种上下文中的使用。这将使重用该组件变得相当困难。

是否有关于如何充分利用这两个方面的最佳实践？关于如何使表达组件尽可能保持愚蠢，同时允许它们为其他页面创建实际的href？

我希望我的榜样足够清楚。如果没有，请告诉我:)）

谢谢！

Answer 1

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

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

1 个答案: