如何为新的子路由重新加载 Angular 路由器答案

【问题标题】：How can I make Angular Router reload for new sub-routes如何为新的子路由重新加载 Angular 路由器
【发布时间】：2019-07-16 03:46:51
【问题描述】：

我正在创建一个能够在网站上显示产品的 Angular 应用。当我单击某个产品时，预期的行为是将我带到产品描述组件，并且确实如此。但是，在产品描述组件中，单击相关产品会更改 URL，但页面保持不变。我该怎么做才能改变它？

到目前为止，我已经尝试在路由模块中将“pathMatch”设置为“full”。我的路由器插座位于根 app.component 文件中，到目前为止，导航已按预期在整个应用程序中运行。

这是 Routes 数组中的路由：

{ path: 'product/:prod_id', component: ProductDescriptionComponent, pathMatch: 'full' },

这是链接到 ProductDescription 组件的产品组件标题

<a [routerLink]="['/product', bag.prod_id]" class="link-a">{{bag.title}}</a>

单击产品时没有错误消息。

【问题讨论】：

你能显示将路由参数绑定到bag.pro_id的函数
@EthanVu 这里是：[html] <div *ngFor="let bag of item?.products"> <a [routerLink]="['/product', bag.prod_id]" class="link-a">{{bag.title}}</a> <div>

【解决方案1】：

我的路由器插座在根 index.html 文件中，这是你的问题！

你的应用组件应该有一个路由出口，index.html 不能渲染组件。

<router-outlet></router-outlet>

这就是路由组件的渲染位置。

这是一个实现路由的简单 StackBlitz。

【讨论】：