功能模块中的 Angular 2 路线

Question

我必须在主模块和功能模块中都使用路由。 当我将路由器导入功能模块时，应用程序不起作用，浏览器正在“思考”并保持加载，直到 chrome 显示“页面没有响应”。

我跟随但没有成功 this answer

应用路由：

const appRoutes: Routes = [
        { path: 'login', component: AuthComponent },
        { path: 'register', component: RegisterComponent },
        { path: 'resetpassword', component: ResetPassword },
        { path: 'resetpassword/choose', component: ChoosePassword },
        { path: 'tournament', component: Tournament },
        { path: '', component: HomeComponent, pathMatch: 'full', canActivate: [AuthGuard] },

        { path: '**', redirectTo: '' }
    ];

    export const routing = RouterModule.forRoot(appRoutes);

以及功能模块中的路线：

const appRoutes: Routes = [
    {
        path: 'tournament', component: Tournament, children:
        [
            { path: 'new', component: TournamentCreationMain },
        ]
    },
    { path: '', component: Tournament, pathMatch: 'full', canActivate: [AuthGuard] },

    { path: '**', redirectTo: '' }
];

export const routingTournament = RouterModule.forChild(appRoutes);

在 app.module 中，我导入功能模块和 app.router：

imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    TournamentModule,
    routing
]

在功能模块中我导入了自己的路由器：

imports: [
    CommonModule,
    FormsModule,
    routingTournament,
    HttpModule
]

提前致谢 最大

Answer 1

据我所知，您不必在 appRoutes 中为锦标赛路径定义锦标赛组件。您还应该在 children 数组中定义比赛的所有子路线。请尝试更改为：

    const appRoutes: Routes = [
        {
            path: 'tournament', 
            children: [
                { path: 'new', component: TournamentCreationMain },
                { path: '', component: Tournament, pathMatch: 'full', canActivate: [AuthGuard] },
                { path: '**', redirectTo: '' }
            ]
        },

    ];