Question

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

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

以下是“路线”数组中的路线：

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

这里是链接到ProductDescription组件的Product Component标题

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

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

Answer 1

我的路由器出口在index.html根文件中，这是您的问题！

您的应用程序组件应具有路由器出口，index.html无法呈现组件。

<router-outlet></router-outlet>

这就是路线的组件将呈现的位置。

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