Angular 8 个子路由在组件中不起作用

Question

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

我创建了 Layout Components 和 Modules 并启用了 Routing。创建了路由和连接的组件，但问题是如果我直接从 link 打开它们，路由工作正常。但是当我尝试使用 router.navigate 重定向时，路由不起作用。

下面是我的文件

app-routing.module.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;

app.module.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 {
}

auth-layout.routing.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 { }

或

应用-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 { }

在阅读新代码（或您自己的旧代码）时，坚持通用约定会有所帮助 - 您可以识别通用模式，而无需在头脑中分析不熟悉的模式。

Angular 8 个子路由在组件中不起作用

Angular 8 Child Routes not working from component

angular-routing

angular

angular-routerlink

ngx-admin

angular8

路由器模块模式