angular - 在 Angular 中，我如何直接导航到延迟加载模块内的路径？

Question

我想要两个用于登录和注册的顶级路径。

我宁愿不必执行 auth/log-in 和 auth/register。

但是，auth 组件位于单独的模块中，这很好，因为除非特别要求，否则不应加载它。

export const routes: Route[] = [
  { path: 'log-in',   loadChildren: './auth-module/auth.module#AuthModule'},
  { path: 'register', loadChildren: './auth-module/auth.module#AuthModule'}
];

我在定义路由时如何指定我希望 log-in 路径转到 log-in 路径 inside 延迟加载的 AuthModule，以及 register 路径以转到 inside 延迟加载模块的 register 路径？

Answer 1

更新

即使是惰性加载模块也可以定义一个空路由。

const APP_ROUTES: Routes = [
    { path: '', () => import('./app/auth/auth.module').then(m => m.AuthModule)},
];

然后在您的延迟加载模块中定义两个组件的路径

const MODULE_ROUTES: Routes = [
    { path: 'login', component: LoginComponent},
    { path: 'register', component: RegisterComponent }
];

仅当组件路径匹配时才加载模块

原始 Awnser

到目前为止，无法像您在帖子中那样配置路由。如果您为路由器启用日志记录，您会看到这一点。您的模块(登录、注册)的路径已被消耗，在您的模块路由中，您将只有 '' left，无法匹配到两个不同的组件。

你仍然可以实现这一点，即使它不是那么漂亮而且我不知道它如何/是否在旧浏览器中工作。

在你的app.module.ts

const APP_ROUTES: Routes = [
    { path: 'login', redirectTo: 'auth/login', pathMatch: 'full' },
    { path: 'register', redirectTo: 'auth/register', pathMatch: 'full' },
    { path: 'auth', loadChildren: 'app/auth/auth.module#AuthModule', pathMatch: 'prefix'},
];

@NgModule( {
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        RouterModule,
        RouterModule.forRoot(APP_ROUTES)
    ],
    providers: [
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

和 auth.module.ts看起来像这样

const ROUTES: Routes = [
    { path: 'login', component: LoginComponent, pathMatch: 'full' },
    { path: 'register', component: RegisterComponent, pathMatch: 'full' }
];

@NgModule( {
    imports: [
        CommonModule,
        RouterModule.forChild( ROUTES )
    ],
    declarations: [
        LoginComponent,
        RegisterComponent
    ]   
} )
export class AuthModule { }

然后您可以通过 <a routerLink="login">Login</a> 访问路线, 适用于 router.navigate以及。不幸的是，这会给你留下 auth/login或 auth/register在你的浏览器 url 中，即使客户端只调用 /login .

您可以通过在 window.history 中创建一个条目来解决这个问题- 正如我所说的那样不漂亮，必须在您的组件构造函数中完成。 window.history.pushState('register', 'Register', 'register');或 window.history.pushState('login', 'Login', 'login');在组件中将留下您的浏览器 url /login和 /register .

最好的方法当然是使用此功能扩展 Angular 路由器并将其用作自定义路由器，但您必须为此真正投入使用，并且在下一次更新中您可能会搞砸。

也许这对你有帮助

最好的问候