Angular 8 Child Routes无法从组件运行

Question

我有一个奇怪的问题，我克隆了ngx-admin，并试图将主题用作基本主题。

我在启用Routing的情况下创建了带有Modules的Layout Components。创建了管线和连接的组件，但问题是，如果我直接从链接打开它们，管线可以正常工作。但是当我尝试使用router.navigate重定向时，路由不起作用。

以下是我的文件

应用程序路由模块.ts

import { ExtraOptions, RouterModule, Routes } from '@angular/router';
import { NgModule } from '@angular/core';
import { DashboardLayoutComponent } from './layouts/dashboard-layout/dashboard-layout.component';
import { AuthenticationLayoutComponent } from './layouts/authentication-layout/authentication-layout.component';
const routes = [
{
path: '',
redirectTo: 'app',
pathMatch: 'full',
},
{
path: '',
component: DashboardLayoutComponent,
children: [
{
path: 'app',
loadChildren: () => import('./layouts/dashboard-layout/dashboard-layout.module').then(m => m.DashboardLayoutModule)
}
]
},
{
path: '',
component: AuthenticationLayoutComponent,
children: [
{
path: 'auth',
loadChildren: () => import('./layouts/authentication-layout/authentication-layout.module').then(m => m.AuthenticationLayoutModule)
}
]
},
{
path: '**',
redirectTo: 'app'
}
];
export const AppRoutingModule : Routes = routes;

应用程序模块.ts

@NgModule({
declarations: [
AppComponent,
DashboardLayoutComponent,
AuthenticationLayoutComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
HttpClientModule,
RouterModule.forRoot(AppRoutingModule),
CookieModule.forRoot(),
ThemeModule.forRoot(),
NbSidebarModule.forRoot(),
NbMenuModule.forRoot(),
NbWindowModule.forRoot(),
NbToastrModule.forRoot(),
CoreModule.forRoot(),
FormsModule,
ReactiveFormsModule
],
providers: [AuthGuard, AuthService],
bootstrap: [AppComponent],
})
export class AppModule {
}

身份验证布局.路由.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from '../../pages/auth/login/login.component';
import { ForgotComponent } from '../../pages/auth/forgot/forgot.component';
import { VerifyComponent } from '../../pages/auth/verify/verify.component';
export const AuthenticationLayoutRoutingModule : Routes = [
{ path: '', redirectTo: 'login', pathMatch: 'full' },
{ path: 'login', component: LoginComponent },
{ path: 'forgot', component: ForgotComponent },
{ path: 'verify/invite/:_hash', component: VerifyComponent},
{ path: '**', redirectTo: 'login' }
]

auth layout.module.ts

@NgModule({
declarations: [
LoginComponent,
ForgotComponent,
VerifyComponent
],
imports: [
CommonModule,
RouterModule.forChild(AuthenticationLayoutRoutingModule),
ThemeModule,
NbAlertModule,
FormsModule,
ReactiveFormsModule,
NbPopoverModule,
NbCardModule,
NbIconModule
],
})
export class AuthenticationLayoutModule { }

我试图从验证组件导航到登录组件，下面是代码

constructor(private router: Router, private activatedRoute: ActivatedRoute, private authService: AuthService, private toastrService: NbToastrService) {}
ngOnInit() {
this.router.navigate['/auth/login'];
}

但如果我使用以下代码，它将正确重定向

<a [routerLink]="['/auth/login']">Click to redirect</a>

如果我做错了什么，请告诉我。

Answer 1

您没有正确调用router.navigate。它是一个函数，应该像一样调用

ngOnInit() {
this.router.navigate(['/auth/login']);
}

路由器模块模式

在一个无关的问题中，路由模块的声明方式令人困惑。你所命名的模块并不是真正的模块。

典型的模式是：

app.module.ts

const appRoutes: Routes = [
// ... routes here
];
@NgModule({
imports: [
RouterModule.forRoot(appRoutes)
]
})
export class AppModule { }

或

app-routing.module.ts

const appRoutes: Routes = [
// ... routes here
];
@NgModule({
imports: [
RouterModule.forRoot(appRoutes)
],
export: [RouterModule]
})
export class AppRoutingModule { }

app.module.ts

@NgModule({
imports: [
AppRoutingModule
]
})
export class AppModule { }

在阅读新代码(或自己的旧代码(时，坚持通用惯例会有所帮助——你可以识别通用模式，而不必在脑海中解析不熟悉的模式。