延迟加载和路径匹配问题

Question

    // App Routes
export const ROUTES: Routes = [
    { path: '',                 redirectTo: 'home', pathMatch:'full' },
    { path: 'account',          loadChildren: './app/account/account.module#AccountModule' },
    { path: 'enterprise',       loadChildren: './app/company/company.module#CompanyModule' },
    { path: 'home',             component: DashboardComponent,     canActivate:[SessionGuard]   },
    { path: 'profile',          component: ProfileComponent,  canActivate:[SessionGuard]   },
    { path: 'user/:username',   component: UserComponent,     canActivate:[SessionGuard]   },    
    { path: '**',               component: ErrorComponent }
];
// Account Routes
export const ACCOUNT_ROUTES: Routes = [
    {
        path: '',
        component: AccountComponent,
        outlet: 'account',
        children: [
            { path: 'forgot', component: ForgotComponent},
            { path: 'login', component: LoginComponent},
            { path: 'register', component: RegisterComponent},
        ]
    }
];

// Company Routes
export const COMPANY_ROUTES: Routes = [
    {
        path: 'compnay',
        component: CompanyComponent,
        outlet: 'account',
        children: [
            { path: 'about', component: AboutComponent},
            { path: 'careers', component: CareersComponent},
        ]
    }
];

我在使用Lazy Loaded Modules进行路由时遇到问题。错误打印出来像这样：

core.js：1427 ERROR错误：未捕获（在承诺中）：错误：无法匹配任何路由。网址细分：'account / login'错误：无法匹配任何路由。网址细分：'帐户/登录'

我的模块正确反映了......

// App Module
@NgModule({
  bootstrap: [ AppComponent ], 
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
    ...
    CompanyModule,
    AccountModule,

    RouterModule.forRoot(ROUTES, {
       useHash: Boolean(history.pushState) === false,
       preloadingStrategy: PreloadAllModules
    })
  ],
  providers: [
    SessionGuard,
    ...
  ]
})
export class AppModule {}

// Account Lazy Module
@NgModule({
    imports: [
        RouterModule.forChild(ACCOUNT_ROUTES)
    ],
    declarations: [
        AccountComponent,
        ...
    ],    
    bootstrap: [AccountComponent]
})
export class CompanyModule {}

// Company Lazy Module
@NgModule({
    imports: [
        RouterModule.forChild(COMPANY_ROUTES)
    ],
    declarations: [
        CompanyComponent,
        ...
    ],    
    bootstrap: [CompanyComponent]
})
export class CompanyModule {}

我也使用Router Outlet来查看每个模块上的路由。

// app level
<router-outlet></router-outlet>

// account level
<router-outlet name="account"></router-outlet>

// company level
<router-outlet name="company"></router-outlet>

如果有人能够解读这个......这将是一个巨大的帮助......我已经在这里待了好几个小时了，我所做的每一个改变都会产生相同的输出。

Answer 1

你应该用

this._router.navigate(['account', 'login'])

或者通过URL浏览

this_router.navigateByUrl('/account/login')