具有动态前缀的角度路由

Question

我有一个成功页面，我想在执行某些操作后重定向到该页面。 目前我的 url 在重定向后只是 localhost:4200/success 但我希望我的 url 将 /success 附加到我当前重定向的任何路径，因为我的 succes 页面是通用的并从重定向组件接收其数据。

示例： 在撰写评论时，我的网址将是 localhost:4200/review，成功发布评论后，我希望重定向到我的成功页面，同时将网址转换为 localhost:4200/review/success

如何在 Angular 中动态添加路径前缀？

我的延迟加载路由模块看起来像这样：

{
    path: 'review',
    loadChildren: () => import('./review/review.module').then(m => m.ReviewModule)
},
{
    path: 'order',
    loadChildren: () => import('./order/order.module').then(m => m.OrderModule)
},{
    path: 'succes',
    loadChildren: () => import('./succes/succes.module').then(m => m.SuccesModule)
},

成功模块：

const succesRoutes: Routes = [
{ path: '', component: SuccesComponent },

];

Answer 1

只是问一下，但是为什么要实现这样的设计模式呢？在我的脑海里，这似乎不是一个好主意。如果用户手动输入

localhost:4200/review/success

并且他没有从任何地方重定向，会发生什么，然后会发生什么？

通常，在发布成功后，查询参数（例如 id）将被添加到项目的 url 中。这有两个功能，表明发帖成功，并且您有一个可以导航到的网址。

https://angular.io/start/start-routing#associate-a-url-path-with-a-component

    RouterModule.forRoot([
      { path: '', component: ProductListComponent },
      { path: 'products/:productId', component: ProductDetailsComponent },
    ])

https://getting-started-myfork.stackblitz.io/products/1

Answer 2

我花了一些时间才弄清楚这一点，但这是可能的。基本上我很好奇 RouterModule 本身是如何做到这一点的（因为它有

.forRoot()

和

.forChild()

并且都返回一个有效的模块）并且有一个名为

ModuleWithProviders<T>

的接口，您可以使用它来创建支持动态前缀的模块路线。

以下是您可以如何做到的。

子模块

import { ModuleWithProviders, NgModule } from '@angular/core';
import { provideRouter, Routes } from '@angular/router';
(...)

const createRouting = (prefix = 'submodule'): Routes => {
  return [
    {
      path: `${prefix}/some-route-in-submodule`,
      component: SomeComponent,
    },
  ]
}

@NgModule({
  imports: [...],
  declarations: [...],
  providers: [
    { provide: SomeService, useClass: SomeService },
    { provide: SomeOtherService, useClass: SomeOtherService },
  ],
})
export class YourModule {
  static forRoot(): ModuleWithProviders<YourModule> {
    return {
      ngModule: YourModule,
      providers: [
        provideRouter(createRouting())
      ]
    }
  }

  static withRoutingPrefix(prefix: string): ModuleWithProviders<YourModule> {
    return {
      ngModule: YourModule,
      providers: [
        provideRouter(createRouting(prefix))
      ]
    }
  }
}

app.module.ts

您现在有两种导入模块的可能性，要么使用默认路由/前缀，要么使用您想要提供的任何内容：

默认前缀：

@NgModule({
  imports: [
    YourModule.forRoot()
  ]
})
class AppModule

还有其他一些前缀：

@NgModule({
  imports: [
    YourModule.withRoutingPrefix('whatyouwant')
  ]
})
class AppModule

一些补充说明：

1. 如果您不需要任何默认路由，只需完全省略

   forRoot()

   方法
2. 无论您使用

   ModuleWithProviders

   接口返回什么，都将结合 @NgModule 定义中的提供程序和您在方法中定义的提供程序，这就是为什么您不需要重新定义所有提供程序，而只需重新定义新的提供程序。然而，这有一个含义：您无法定义仅在导入

   YourModule

   时可用的默认前缀，因为您的子模块将可以使用这两个前缀（您的默认前缀和提供的前缀）进行调用。因此就有了

   forRoot

   方法和

   withRoutingPrefix

   方法。这导致#3：
3. 如果你只导入

   YourModule

   ，子模块根本就没有路由，这意味着你必须使用其中一种方法