Question

我希望在加载/运行时设置路由路径（不包含LoadChildren的组件）我遇到过很多类似的帖子，但与我想找的不完全相同。

我正在建立用于产品评论的通用CMS系统，并希望有一个系统可用于所有不同的产品。

路由设置示例：

const routes: Routes = [
   { path: '',  redirectTo: '/bread-machines/reviews/2020', pathMatch: 'full' },
   { pah: 'bread-machines/reviews/2020' , component: ProductReviewsComponent},
   { path: 'bread-machines/reviews/2020/:id' , component: ProductDetailComponent },

];

这工作正常，但我希望能够在运行时/加载时更改路径。组件将保持不变，但是路径必须是动态的（面包机必须能够更改为烤面包机）。

Answer 1

如果要在ts进行路由，请使用此

 constructor( private router: Router){}
 
 click()
   {
     this.router.navigate(['/path/path']);
   }

> if you want routing at html please use this model

    <button mat-button  routerLink="/path/path" >
               ADD EMAIL</button>

Answer 2

您应该配置参数化路由：

const appRoutes: Routes = [
  {
    path: "",
    children: [
      { path: ":category", component: YearComponent, },
      { path: ':category/reviews/:year', component: ProductReviewsComponent },
      { path: ':category/reviews/:year/:id', component: ProductDetailComponent }
    ]
  },
  { path: "**", component: PageNotFoundComponent },
];

查看我根据您的示例制作的此演示：https://stackblitz.com/edit/angular-6jhye5

请询问您对演示或建议的解决方案是否有疑问。

Answer 3

您需要使用

router.config

在构造函数内部。

Answer 4

导出类AppRoutingModule {

构造函数（专用路由器：路由器）{ router.config.push（{path：'bread-machines / reviews / 2020 /：id'，component：ProductDetailComponent}）;

} }

打字稿：运行时控制路由路径

4 个答案: