Angular 6 - 区分文字和参数化路线

Question

我遇到了一个奇怪的问题，我不知道如何处理它。我有一个应用程序可以让您查看您的公共帐户或创建一个新帐户。

Account 和 CreateAccount 是在 routes.ts 文件中延迟加载的独立模块。

export const routes: Array<Route> = [
  { path: '', component: WelcomeComponent, pathMatch: 'full'},
  { path: ':name', loadChildren: './account/account.module#AccountModule' },
  { path: 'create-account', loadChildren: './create-account/create-account.module#CreateAccountModule', pathMatch: 'full'},  
  { path: '**', redirectTo: ''}
];

为了显示您的帐户，您必须输入您的用户名，然后导航到您的帐户概览。此步骤后的 URL 应如下所示：https://baseurl.com/*accountName*/*someView*

帐户模块路由如下所示：

export const routes: Array<Route> = [
  { path: '', component: AccountComponent, canActivateChild: [AccountGuardService], children: [
    { path: '', component: OverviewComponent },
    { path: 'transfer', component: TransferComponent, canActivate: [DeletedGuardService] },
    { path: 'voting', component: VotingComponent, canActivate: [DeletedGuardService] },
    { path: 'vesting', component: VestingComponent, canActivate: [DeletedGuardService] }
  ] },
]

如果您想创建一个新帐户，您可以以“登录”用户的身份进行操作，这样您就可以完全控制您的子帐户或创建一个新帐户。 区别在于 URL 中的参数： https://baseurl.com/create-account/*accountName* - 创建子账户 https://baseurl.com/create-account - 创建新帐户

CreateAccount 组件充当向导，它使用 @ngrx/store 来处理向导导航。 AccountName url 参数在向导中指定不同的起点。

CreateAccount 模块路由：

export const routes: Array<Route> = [
  { path: '', component: CreateAccountComponent, canDeactivate: [CreateAccountGuardService] },
  { path: ':account', component: CreateAccountComponent, canDeactivate: [CreateAccountGuardService] },
];

在我重构项目以使用延迟加载模块之前，一切都完美无缺。现在，有了这个配置，无论我使用什么 URL，我总是被重定向到 root 并显示 CreateAccountComponent。

https://baseurl.com/*accountName* -> https://baseurl.com/

https://baseurl.com/*accountName*/transfer -> https://baseurl.com/

https://baseurl.com/create-account -> https://baseurl.com/

https://baseurl.com/create-account/*accountName* -> https://baseurl.com/

如何准确区分文字路由 create-account 和参数化路由 :name？在各个地方使用pathMatch: full 根本没有帮助。不得不承认，我对路由的理解还不是很强。

这就是重构之前路由的样子：

export const routes: Array<Route> = [
  { path: '', component: WelcomeComponent, pathMatch: 'full'},
  { path: 'create-account', component: CreateAccountComponent, canDeactivate: [CreateAccountGuardService], pathMatch: 'full' },
  { path: 'create-account/:account', component: CreateAccountComponent, pathMatch: 'full', canDeactivate: [CreateAccountGuardService] },
  { path: ':name', component: AccountComponent, canActivateChild: [AccountGuardService], children: [
    { path: '', component: OverviewComponent },
    { path: 'transfer', component: TransferComponent, canActivate: [DeletedGuardService] },
    { path: 'voting', component: VotingComponent, canActivate: [DeletedGuardService] },
    { path: 'vesting', component: VestingComponent, canActivate: [DeletedGuardService] }
  ] },
  { path: '**', redirectTo: ''}
];

编辑： 在 Routes.Module.ts 中发现问题的原因。我忘记删除不再导入而是延迟加载的模块 (CreateAccountModule)

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { SharedModule } from '../shared/shared.module';

import { CreateAccountModule } from './create-account/create-account.module';

import { routes } from './routes';
import { WalletComponent } from './wallet/wallet.component';


@NgModule({
  imports: [
    SharedModule,
    /*CreateAccountModule, - removing this import fixes the problem with routing override. Routing now works. */
    RouterModule.forRoot(routes),
  ],
  declarations: [
    WalletComponent, 
  ],
  exports: [
    RouterModule
  ]
})
export class RoutesModule { }

Answer 1

这是在没有构建完整项目的情况下在黑暗中拍摄，但尝试将路由的顺序更改为如下所示（即在 ':name' 路由之前有 'create-account' 路由。

export const routes: Array<Route> = [
{ path: '', component: WelcomeComponent, pathMatch: 'full'},
{ path: 'create-account', loadChildren: './create-account/create-account.module#CreateAccountModule', pathMatch: 'full'},  
{ path: ':name', loadChildren: './account/account.module#AccountModule' },
{ path: '**', redirectTo: ''}
];