Question

我必须访问技能路线，而这对我来说都是不可能的。我已经尝试了很多方法，但无法按照代码的结构访问技能路线。我的想法是能够访问仪表板模块的子级路径

非常感谢您。

// app.routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

// components for route controller 
import { HomeComponent } from './components/home/home.component';

const routes: Routes = [
    { 
        path: '', redirectTo: 'home', pathMatch: 'full' 
    },
    {
        path: 'home', component: HomeComponent
    },
    {
        path: 'dashboard',
        loadChildren: '../app/modules/dashboard/dashboard.module#DashboardModule'
    }

];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

....

// dashboard.routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

// AuthGuardService

import { AuthGuard } from '../../shared/guards/auth-guard.service';

// routing components
import { DashboardComponent } from './dashboard.component';
import { DashboardHomeComponent } from './components/dashboard-home/dashboard-home.component';
import { SkillsComponent } from './components/skills/skills.component';

const routes: Routes = [
  {
    path: '',
    component: DashboardComponent,
    canActivate: [AuthGuard],
    children: [
      {
        path: '',
        component: DashboardHomeComponent,
        outlet: "dashboard"
      },
      {
        path: 'skills',
        component: SkillsComponent,
        outlet: "dashboard"
      }
    ]
  }

];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class DashboardRoutingModule { }

Answer 1

确保DashboardModule导入了DashboardRoutingModule

// dashboard.module.ts

...
import DashboardRoutingModule  from './dashboard.routing.module.ts'.

@NgModule({
  imports: [DashboardRoutingModule]
});

延迟加载的Angular 6儿童路线

1 个答案: