36

这是我的 Angular2 应用程序结构：

在此处输入图像描述

这是我的代码的一部分。以下是moduleAngular2 应用程序的主要部分，它导入了它的路由规则和一个子模块 ( EdgeModule)，并使用了与某些页面相关的一些组件。

app.module.ts

@NgModule({
    declarations: [
        AppComponent,
        PageNotFoundComponent,
        LoginComponent
    ],
    imports: [
        ...
        appRouting,
        EdgeModule
    ],
    providers: [
        appRoutingProviders,
        LoginService
    ],
    bootstrap: [AppComponent]
})

export class AppModule {
}

这是主模块的路由规则。它具有登录页面和未找到页面的路径。

app.routing.ts

const appRoutes: Routes = [
    { path: 'login', component: LoginComponent },
    { path: '**', component: PageNotFoundComponent }
];

export const appRoutingProviders: any[] = [];

export const appRouting = RouterModule.forRoot(appRoutes, { useHash: true });

这是EdgeModule声明它使用的组件并导入它自己的路由规则和 2 个子模块（FirstSectionModule和SecondSectionModule）。

边缘模块.ts

@NgModule({
    declarations: [
        EdgeComponent,
        SidebarComponent,
        TopbarComponent
    ],
    imports: [
        ...
        edgeRouting,
        FirstSectionModule,
        SecondSectionModule
    ],
    providers: [
        AuthGuard
    ]
})

export class EdgeModule {
}

如您所见，这是加载顶栏和侧边栏组件的模块的路由规则。

边缘路由.ts

Paths['edgePaths'] = {
    firstSection: 'firstSection',
    secondSection: 'secondSection'
};

const appRoutes: Routes = [
    { path: '', component: EdgeComponent,
        canActivate: [AuthGuard],
        children: [
            { path: Paths.edgePaths.firstSection, loadChildren: '../somepath/first-section.module#FirstModule' },
            { path: Paths.edgePaths.secondSection, loadChildren: '../someotherpath/second-section.module#SecondModule' },
            { path: '', redirectTo: edgePaths.dashboard, pathMatch: 'full' }
        ]
    }
];

export const edgeRouting = RouterModule.forChild(appRoutes);

最后，这是两个子模块之一，具有其组件并导入其路由规则。

第一部分.module.ts

@NgModule({
    declarations: [
        FirstSectionComponent,
        SomeComponent
    ],
    imports: [
        ...
        firstSectionRouting
    ],
    providers: [
        AuthGuard,
    ]
})

export class FirstSectionModule {
}

这些是页面（组件）的路由规则FirstSectionModule

第一部分.routing.ts

Paths['firstSectionPaths'] = {
    someSubPage: 'some-sub-page',
    someOtherSubPage: 'some-other-sub-page'
};

const appRoutes: Routes = [
    {
        path: '',
        children: [
            { path: Paths.firstSectionPaths.someSubPage, component: someSubPageComponent},
            { path: Paths.firstSectionPaths.someOtherSubPage, component: someOtherSubPageComponent},
            { path: '', component: AnagraficheComponent }
        ]
    }
];

export const firstSectionRouting = RouterModule.forChild(appRoutes);

second-section.module.ts和second-section.routing.ts文件几乎相同。

当我运行应用程序时，首先加载的是与 相关的页面FirstSectionComponent，没有侧边栏也没有顶栏。

你能告诉我我的代码有什么问题吗？控制台中没有错误。

4

4 回答 4

8

您可以尝试使用loadChildrenwhere homeModule, productModule,aboutModule有自己的路由规则。

const routes: Routes = [
    { path: 'home', loadChildren: 'app/areas/home/home.module#homeModule' },
    { path: 'product', loadChildren: 'app/areas/product/product.module#ProductModule' },
    { path: 'drawing', loadChildren: 'app/areas/about/about.module#AboutModule' }
];

export const appRouting = RouterModule.forRoot(routes);

家乡路线规则就像

export const RouteConfig: Routes = [
    {
        path: '',
        component: HomeComponent,
        canActivate: [AuthGuard],
        children: [
            { path: '', component: HomePage },
            { path: 'test/:id', component: Testinfo},
            { path: 'test2/:id', component: Testinfo1},
            { path: 'test3/:id', component: Testinfo2}
        ]
    }
];

这也称为延迟加载模块。

{ path: 'lazy', loadChildren: 'lazy/lazy.module#LazyModule' }

这里有一些重要的事情需要注意：我们使用属性loadChildren而不是组件。我们传递一个字符串而不是一个符号来避免急切地加载模块。我们不仅定义了模块的路径，还定义了类的名称。除了LazyModule它有自己的路由和一个名为LazyComponent.

查看与此相关的精彩教程： https ://angular-2-training-book.rangle.io/handout/modules/lazy-loading-module.html

于 2017-06-07T03:23:37.177 回答
1

在您的 app.routing.ts 中，只有 2 条路由，并且没有包含导航到 Main 部分的路由（如图所示）。需要有一个带有 loadchildren 属性的路由条目，以便它将加载 Main 部分的模块。

routes: Routes = [...
{ 
path: 'main', loadChildren: '<file path>/<Edge module file name>#EdgeModule' 
}
...];

这将加载 EdgeModule 中的其余模块、组件路由和所有内容。

于 2017-08-09T11:54:23.420 回答
0

不确定我是否正确地解决了问题，但这是我用来动态生成路由的一个小代码片段：

app.component.ts：

constructor(private _router: Router) {
}

ngOnInit() {
     ...
     this._router.config[0].children = myService.getRoutes(); 
     this._router.resetConfig(this._router.config);
     console.debug('Routes:', this._router.config);
     ...
}

它不是 OOTB 解决方案，但您可以获得有关当前路线的信息。

于 2017-02-03T16:24:30.847 回答
0

这是一个依赖注入问题。我们不需要在 edgeModule 中注入 FirstSectionModule 和 SecondSectionModule 以及我们可以在 FirstSectionModule 和 SecondSectionModule 中使用的路由。因此，只需将其从 edgeModule 中删除即可。

于 2017-07-19T03:18:43.247 回答