Question

我知道这个问题很多时候我已经搜索了很多 SO 问题，但无法找到答案所以只是发布我的问题我的结构如下所示。

const appRoutes: Routes = [
    {
        path: '',
        redirectTo: 'A',
        pathMatch: 'full'
    },
    {
        path: 'A',
        resolve: {
            DATA: ADataResolver,
        },
        children: [
            {
                path: '',
                redirectTo: 'B',
                pathMatch: 'full'
            },
            {
                path: 'B',
                loadChildren: './b/b.module#BModule'
            }]
    }
]

现在在app app上我想加载路径 A / B

我将如何做？我做了上面的事情而且没有用。任何帮助表示赞赏。

Answer 1

我想知道其他地方是否有其他问题。我只是修改了我的代码（基本上）匹配你所拥有的，它工作正常（见下文）。我有电影，所以那就是你的“B”。

const appRoutes: Routes = [
    {
        path: '',
        redirectTo: 'A',
        pathMatch: 'full'
    },
    {
        path: 'A',
        children: [
            { path: 'welcome', component: WelcomeComponent },
            {
                path: 'movies',
                loadChildren: './movies/movie.module#MovieModule'
            },
            { path: '', redirectTo: 'movies', pathMatch: 'full' }
        ]
    },
    { path: '**', component: PageNotFoundComponent }
];

导航至http://localhost:4200，生成以下网址：http://localhost:4200/A/movies

您可以在此处找到我的代码：https://github.com/DeborahK/MovieHunter-communication/tree/master/MH-Take4

我刚刚修改了我的app-routing.module.ts，如上所示并运行它。

Answer 2

请检查B模块，它也是必需的组件和路由概念。

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
import { AdminComponent } from "../components/admin/admin.component";

export const routes: Routes = [
  {
    path: '', component: AdminComponent 

  }
];

@NgModule({
  declarations: [
    AdminComponent
  ],
  imports: [
    CommonModule, 
     RouterModule.forChild(routes)
  ],
  bootstrap: [AdminComponent]
})
export class BModule { }

Answer 3

如果要延迟加载一个或多个模块，直到用户请求这些模块，则应使用延迟加载。看起来您的方案默认需要B模块。您可以直接调用组件：

const appRoutes: Routes = [
    {
        path: '',
        redirectTo: 'A',
        pathMatch: 'full'
    },
    {
        path: 'A',
        resolve: {
            DATA: ADataResolver,
        },
        children: [
            {
                path: '',
                redirectTo: 'B',
                pathMatch: 'full'
            },
            {
                path: 'B',
                component: 'BComponent'
            }]
    }
]

如果它仍然是一个懒惰的模块，你试过enableTracing吗？路线是否得到认可？

如何在角度2中加载延迟加载时默认加载子路由？

3 个答案: