Question

我有一个默认模块app.module.ts，在该模块中，我定义了一条路由，例如：

 const mainRoutes: Routes = [
      {path:'',component:FrontComponent},
    ] 
    @NgModule({
      declarations: [
        AppComponent,
        AdminComponent,
        FrontComponent
      ],
      imports: [
        BrowserModule,
        FrontModule,
        AdminModule,
        RouterModule.forRoot(mainRoutes)
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

我还有另一个模块admin.module.ts，它是应用程序模块的子模块，为此我使用路由：

const routes: Routes = [
    { path: 'admin',
      component: AdminComponent,
      children:[
        {path:'',component:AdminmainComponent},
        {path:'home',component:HomeComponent},
        {path:'matches',component:MatchesComponent},
        {path:'tournament',component:TournamentComponent},
        {path:'teams',component:TeamsComponent}
        ]
    }
      ];

    @NgModule({const routes: Routes = [
  {
    path: 'menus', component: MenusComponent, children: [
      { path: 'create', component: CreateComponent },
      { path: 'list', component: ListComponent },
      { path: 'view/:id', component: ViewComponent },
      { path: 'edit/:id', component: CreateComponent }
    ]
  }
];

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

admin.module.ts包含另一个子模块菜单模块，它是admin的子级，它包含一些功能，例如创建，查看，编辑，我希望将其路由：

const routes: Routes = [
{
    path: 'menus', component: MenusComponent, children: [
          { path: 'create', component: CreateComponent },
          { path: 'list', component: ListComponent },
          { path: 'view/:id', component: ViewComponent },
          { path: 'edit/:id', component: CreateComponent }
        ]
      }
    ];

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

但是我在控制台[object object]中遇到了错误

Answer 1

菜单菜单模块延迟加载，看起来像这样：

管理员路由

export const adminRoutes: Routes = [
{
    path: "admin", (...)
    children: [

        {
            path: "admin",
            children: [
               {path:'', pathMatch:'full',component:AdminmainComponent},
               {
                  path: "menus", 
                  // if you want lazy
                  loadChildren: "./components/menus/menus.module#MenusModule"
                  // if not... then:
                  //children: [...menuRoutes]
              },
             {path:'home',component:HomeComponent},
             {path:'matches',component:MatchesComponent},
             {path:'tournament',component:TournamentComponent},
             {path:'teams',component:TeamsComponent}


            ]

    ]
}, ... ];

并在menu.module中：

 const menuRoutes = [
        { path: 'create', component: CreateComponent },
              { path: 'list', component: ListComponent },
              { path: 'view/:id', component: ViewComponent },
              { path: 'edit/:id', component: CreateComponent }
    ]

如果您这样做，则您的模块应该延迟加载（如果您更改LoadStrategy）

Answer 2

在您的应用模块中，您需要指定延迟加载的管理路由

const mainRoutes: Routes = [
      {path:'',component:FrontComponent},
      {path:'admin', loadChildren: './admin.module#AdminModule'
    ] 
    @NgModule({
      declarations: [
        AppComponent,
        AdminComponent,
        FrontComponent
      ],
      imports: [
        BrowserModule,
        FrontModule,
        AdminModule,
        RouterModule.forRoot(mainRoutes)
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

然后，您的管理模块中的admin路由和惰性加载菜单的路由都以相同的方式

const routes: Routes = [
    { path: 'admin',
      component: AdminComponent,
      children:[
        {path:'',component:AdminmainComponent},
        {path:'home',component:HomeComponent},
        {path:'matches',component:MatchesComponent},
        {path:'tournament',component:TournamentComponent},
        {path:'teams',component:TeamsComponent},
        {path:'teams',loadChildren: './menu.module.ts#MenuModule'},
        ]
    }
      ];

    export class AdminRoutingModule { }

并在菜单模块中为菜单定义路线

角度6中的多级布线

2 个答案: