Question

我正在开发一个Angular2应用程序，我希望有这样的结构：

APP ---＆gt;主投币器---＆gt;第一节
APP ---＆gt;主投币器---＆gt;第二部分
APP ---＆gt;主投币器---＆gt;第三部分

我会为每个级别都有一个模块：

app.module.ts
main.module.ts
first-section.module.ts
second-section.module.ts
third-section.module.ts

我尝试创建以下文件，代表两个级别。

app.module.ts

@NgModule({
    declarations: [
        AppComponent,
        PageNotFoundComponent,
        LoginComponent
    ],
    imports: [
        HttpModule,
        JsonpModule,
        BrowserModule,
        FormsModule,
        MainModule,
        routing,
    ],
    providers: [
        appRoutingProviders,
        LoginService
    ],
    bootstrap: [AppComponent]
})

export class AppModule {
}

app.routing.ts

Paths['appPaths'] = {
    login: 'login',
    pageNotFound: '**'
};

const appPaths = Paths.appPaths;

const appRoutes: Routes = [
    { path: appPaths.login, component: LoginComponent },
    { path: appPaths.pageNotFound, component: PageNotFoundComponent }
];

export const appRoutingProviders: any[] = [];

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

main.module.ts

@NgModule({
    declarations: [
        MainComponent,
        SomeDirective
    ],
    imports: [
        MainRouting,
        FormsModule,
        BrowserModule,
        ReactiveFormsModule,
    ],
    providers: [
        SomeService,
        AuthGuard
    ]
})

export class MainModule {
}

main.routing.ts

Paths['cdcPaths'] = {
    mainBase: ''
    firstPage: 'firstPage',
    secondPage: 'secondPage',
    thirdPage: 'thirdPage',
};

const cdcPaths = Paths.cdcPaths;

const appRoutes: Routes = [
    {
        path: cdcPaths.mainBase, component: MainComponent,
        canActivate: [AuthGuard],
        children: [
            { path: cdcPaths.firstPage, component: firstPageComponent },
            { path: cdcPaths.secondPage, component: secondPageComponent },
            { path: cdcPaths.thirdPage, component: thirdPageComponent },
            { path: '', redirectTo: cdcPaths.firstPage, pathMatch: 'full' }
        ]
    }
];

export const MainRouting = RouterModule.forChild(appRoutes);

util.ts

export const Paths: any = {};

这可能是正确的做法吗？如您所见，我为每个模块创建了不同的路由文件。这可能是一种正确的发展方式吗？此时......如何创建第三级？

Angular2：如何处理子模块的路由

0 个答案: