Typescript：在运行时控制路由路径答案

【问题标题】：Typescript: Control routing path at runtimeTypescript：在运行时控制路由路径
【发布时间】：2020-05-01 20:58:10
【问题描述】：

我希望在加载/运行时设置路由路径（不是带有 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 },

];

这很好用，但我希望能够在运行时/加载时更改路径。组件将保持不变，但路径需要是动态的（面包机需要能够更改为烤面包机）。

【问题讨论】：

角度路由器有据可查：angular.io/guide/router
R.理查兹。我以前经历过（所有 20k 行），只是不确定哪个示例适用于我要解决的问题。

标签： angular typescript routes

【解决方案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>

【讨论】：

【解决方案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

如果您对演示或建议的解决方案有任何疑问，请询问。

【讨论】：

【解决方案3】：

你需要使用

router.config

在构造函数中。

【讨论】：

我不知道该尝试什么。我担心的是，要么我没有正确地寻找解决方案，要么我试图做的不是一个可行的解决方案。因为我找不到单个代码 sn-p 来解释如何在加载/运行时为面包机或烤面包机加载路由。

【解决方案4】：

导出类 AppRoutingModule {

构造函数（私有路由器：路由器）{ router.config.push({ path: 'bread-machines/reviews/2020/:id' , component: ProductDetailComponent });

} }

【讨论】：

这是什么？答案？