Angular 10 延迟加载不会重定向到组件

Question

我的应用程序路由模块中有这样的路由：

const routes: Routes = [
  ...
  {path: 'listar', loadChildren: () => import('./views/drinks/drinks.module').then((m => m.DrinksModule))},
  ...
];

然后，我有一个饮料路由模块，此路由：

 const routes: Routes = [
  {path: '', component: DrinksListagemComponent },
  {path: 'drinks/:categoria/:drinks', component: DrinksListagemComponent },
  {path: 'drinks/detalhes/:id', component: DrinksDetalhesComponent },
    ];

在我的组件中，我有一个链接来进行重定向：

HTML

<a (click)="toNavigateTo(drink.idDrink)">Clique para ver detalhes.</a>

TS

toNavigateTo = (id: number) => this.router.navigateByUrl('/listar/drinks/detalhes/' + id);

单击时，url 发生变化，控制台没有出现错误，但我的 DrinkDetalhesComponent 没有显示

Answer 1

根据您的回复，问题似乎出在您的DrinksModule路由配置中。

您在DrinksModule中有两条实际上是相同的路线。 至少就 angular 而言。

{path: 'drinks/:categoria/:drinks', component: DrinksListagemComponent },
{path: 'drinks/detalhes/:id', component: DrinksDetalhesComponent },

就路由模块而言，因为您在drinks/detalhes/:id之前有 Drinks/ drinks/:categoria/:drinks ，所以它默认为这个，因为它是数组中的第一个。 路由基于“第一次匹配”方法。

根据 angular 文档

路由的顺序很重要，因为路由器在匹配路由时使用先匹配获胜策略，因此更具体的路由应该放在不太具体的路由之上。 首先列出具有 static 路径的路由，然后是与默认路由匹配的空路径路由。 通配符路由排在最后，因为它匹配每个 URL，并且只有在没有其他路由首先匹配时，路由器才会选择它。

Angular 无法知道detalhes不是有效的categoria 。 因此它是这样对待它的。

一个简单的解决方法是将路由的前缀更改为更具体。 IE

{path: 'drinks/:categoria/:drinks', component: DrinksListagemComponent },
{path: 'drink/detalhes/:id', component: DrinksDetalhesComponent },

通过删除“s”以获取详细信息（因为我们只查看一项），现在我们有两个路径，路由模块将视为单独的路径。 路由模块不会混合drinks和drink 。 您需要修改toNavigateTo方法以将用户发送到：

this.router.navigateByUrl('/listar/drink/detalhes/' + id);

这当然只是一个示例 - 您可以将前缀更改为对您的需要有意义的任何值。