Angular （6）路由问题_Angular_Typescript_Routing

Angular （6）路由问题

angular typescript routing

Angular （6）路由问题,angular,typescript,routing,Angular,Typescript,Routing,我在Angular 6路由器上遇到了一些奇怪的问题，但这一个确实令人沮丧以下是我在路由应用程序.module.ts中构建的路由： export const routes: Routes = [ { path: 'login', component: HomeScreenComponent, children: [ { path: '', compon

我在Angular 6路由器上遇到了一些奇怪的问题，但这一个确实令人沮丧

以下是我在

路由应用程序.module.ts

中构建的路由：

 export const routes: Routes = [
    {
        path: 'login',
        component: HomeScreenComponent,
        children: [
            {
                path: '',
                component: LoginComponent,
                canActivate: [LoginGuard],
            }
        ]
    },
    {
        path: 'password',
        component: HeaderComponent,
        canActivate: [AuthGuard],
        canActivateChild: [AuthGuard],
        children: [
            {
                path: '',
                component: UpdatePasswordComponent
            }
        ]
    },
    {
        path: 'companies/:company_id',
        loadChildren: './facility/facility.module#FacilityModule',
        canLoad: [FacilityGuard]
    },
    {
        path: 'password-reset',
        loadChildren: './general/password/reset-password/reset-password.module#ResetPasswordModule'
    },
    {
        path: '',
        redirectTo: '/login',
        pathMatch: 'full'
    },
    {
        path: '**',
        redirectTo: 'not-found'
    }
];

然后，在设备模块内部：

export const routes: Routes = [
    {
        path: 'dashboard',
        component: HeaderComponent,
        children: [
            {
                path: 'account-rep',
                component: AccountRepDashboardComponent
            },
            {
                path: '',
                component: FacilityDashboardComponent,
                resolve: { company: FacilityDashboardResolve },
                canActivate: [FacilityGuard]
            }
        ]
    },
    {
        path: 'manifests',
        component: HeaderComponent,
        canActivate: [FacilityGuard],
        canActivateChild: [FacilityGuard],
        children: [
            {
                path: 'deleted',
                component: ListDeletedFacilityManifestComponent,
                resolve: { manifests: ListDeletedFacilityManifestResolve }
            },
            {
                path: '',
                component: FacilityManifestComponent,
                resolve: { company: ListFacilityManifestResolve }
            },
            {
                path: ':manifest_id/reconcile',
                component: FacilityReconcileComponent,
                resolve: { manifest: FacilityReconcileResolve }
            }
        ]
    },
    {
        path: 'customers',
        loadChildren: './customer/facility-customer.module#FacilityCustomerModule'
    },
    {
        path: 'sites',
        loadChildren: './site/facility-site.module#FacilitySiteModule'
    }
];

这就是我的问题所在。如果您尝试导航到

/login

，您最终会点击

设施客户模块内的路径：
export const routes: Routes = [
    {
        path: '',
        component: HeaderComponent,
        children: [
            {
                path: ':id',
                component: RootFacilityCustomerComponent,
                resolve: { site: DetailFacilityCustomerResolve },
                children: [
                    {
                        path: 'edit',
                        component: EditFacilityCustomerComponent
                    },
                    {
                        path: '',
                        component: DetailFacilityCustomerComponent,
                        children: [
                            {
                                path: 'details',
                                component: FacilityCustomerDetailsTabComponent
                            },
                            {
                                path: 'sites',
                                component: FacilityCustomerSitesTabComponent
                            },
                            {
                                path: 'users',
                                component: FacilityCustomerUsersTabComponent
                            },
                            {
                                path: '',
                                redirectTo: 'details',
                                pathMatch: 'full'
                            }
                        ]
                    }
                ]
            },
            {
                path: '',
                component: ListFacilityCustomerComponent
            }
        ]
    }
];

@NgModule({
    imports: [
        RouterModule.forRoot(routes)
    ],
    exports: [
        RouterModule
    ]
})

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

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        HttpClientModule,
        DataEntryModule,
        FacilityModule,
        UpdateModule,
        SupportModule,

        CtaModule,
        HeaderModule,
        HomeScreenModule,

        RoutingAppModule,
        ResetPasswordModule
    ],
    declarations: [
        AppComponent,

        LoginComponent,
        NotFoundComponent,
        NotPermittedComponent
    ],
    providers: [
        AppErrorHandlerService,
        {
            provide: ErrorHandler,
            useClass: AppErrorHandler
        }
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

我不明白为什么路由器会匹配这个。我知道它正在点击重定向，因为您最终会进入/login/details

也许我对Angular Router的工作原理没有足够的了解，但我认为它会命中第一条路由/login
，并匹配它，除非它从内到外递归地构建路由
有人能解释一下吗？我在使用Angular 4或Angular 5时没有遇到太多麻烦，所以事情似乎发生了变化，我只是不知道如何改变
编辑：
按照要求，这里是装饰师
路由应用模块
：
export const routes: Routes = [
    {
        path: '',
        component: HeaderComponent,
        children: [
            {
                path: ':id',
                component: RootFacilityCustomerComponent,
                resolve: { site: DetailFacilityCustomerResolve },
                children: [
                    {
                        path: 'edit',
                        component: EditFacilityCustomerComponent
                    },
                    {
                        path: '',
                        component: DetailFacilityCustomerComponent,
                        children: [
                            {
                                path: 'details',
                                component: FacilityCustomerDetailsTabComponent
                            },
                            {
                                path: 'sites',
                                component: FacilityCustomerSitesTabComponent
                            },
                            {
                                path: 'users',
                                component: FacilityCustomerUsersTabComponent
                            },
                            {
                                path: '',
                                redirectTo: 'details',
                                pathMatch: 'full'
                            }
                        ]
                    }
                ]
            },
            {
                path: '',
                component: ListFacilityCustomerComponent
            }
        ]
    }
];

@NgModule({
    imports: [
        RouterModule.forRoot(routes)
    ],
    exports: [
        RouterModule
    ]
})

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

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        HttpClientModule,
        DataEntryModule,
        FacilityModule,
        UpdateModule,
        SupportModule,

        CtaModule,
        HeaderModule,
        HomeScreenModule,

        RoutingAppModule,
        ResetPasswordModule
    ],
    declarations: [
        AppComponent,

        LoginComponent,
        NotFoundComponent,
        NotPermittedComponent
    ],
    providers: [
        AppErrorHandlerService,
        {
            provide: ErrorHandler,
            useClass: AppErrorHandler
        }
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

路由设备模块
和路由设备客户模块
：
export const routes: Routes = [
    {
        path: '',
        component: HeaderComponent,
        children: [
            {
                path: ':id',
                component: RootFacilityCustomerComponent,
                resolve: { site: DetailFacilityCustomerResolve },
                children: [
                    {
                        path: 'edit',
                        component: EditFacilityCustomerComponent
                    },
                    {
                        path: '',
                        component: DetailFacilityCustomerComponent,
                        children: [
                            {
                                path: 'details',
                                component: FacilityCustomerDetailsTabComponent
                            },
                            {
                                path: 'sites',
                                component: FacilityCustomerSitesTabComponent
                            },
                            {
                                path: 'users',
                                component: FacilityCustomerUsersTabComponent
                            },
                            {
                                path: '',
                                redirectTo: 'details',
                                pathMatch: 'full'
                            }
                        ]
                    }
                ]
            },
            {
                path: '',
                component: ListFacilityCustomerComponent
            }
        ]
    }
];

@NgModule({
    imports: [
        RouterModule.forRoot(routes)
    ],
    exports: [
        RouterModule
    ]
})

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

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        HttpClientModule,
        DataEntryModule,
        FacilityModule,
        UpdateModule,
        SupportModule,

        CtaModule,
        HeaderModule,
        HomeScreenModule,

        RoutingAppModule,
        ResetPasswordModule
    ],
    declarations: [
        AppComponent,

        LoginComponent,
        NotFoundComponent,
        NotPermittedComponent
    ],
    providers: [
        AppErrorHandlerService,
        {
            provide: ErrorHandler,
            useClass: AppErrorHandler
        }
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

AppModule
：
export const routes: Routes = [
    {
        path: '',
        component: HeaderComponent,
        children: [
            {
                path: ':id',
                component: RootFacilityCustomerComponent,
                resolve: { site: DetailFacilityCustomerResolve },
                children: [
                    {
                        path: 'edit',
                        component: EditFacilityCustomerComponent
                    },
                    {
                        path: '',
                        component: DetailFacilityCustomerComponent,
                        children: [
                            {
                                path: 'details',
                                component: FacilityCustomerDetailsTabComponent
                            },
                            {
                                path: 'sites',
                                component: FacilityCustomerSitesTabComponent
                            },
                            {
                                path: 'users',
                                component: FacilityCustomerUsersTabComponent
                            },
                            {
                                path: '',
                                redirectTo: 'details',
                                pathMatch: 'full'
                            }
                        ]
                    }
                ]
            },
            {
                path: '',
                component: ListFacilityCustomerComponent
            }
        ]
    }
];

@NgModule({
    imports: [
        RouterModule.forRoot(routes)
    ],
    exports: [
        RouterModule
    ]
})

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

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        HttpClientModule,
        DataEntryModule,
        FacilityModule,
        UpdateModule,
        SupportModule,

        CtaModule,
        HeaderModule,
        HomeScreenModule,

        RoutingAppModule,
        ResetPasswordModule
    ],
    declarations: [
        AppComponent,

        LoginComponent,
        NotFoundComponent,
        NotPermittedComponent
    ],
    providers: [
        AppErrorHandlerService,
        {
            provide: ErrorHandler,
            useClass: AppErrorHandler
        }
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

使用延迟加载时，不应在根模块中导入模块
您对导入到根模块中的模块FacilityModule
使用了延迟加载
根模块中还导入了其他延迟加载的模块，您应该从导入中删除所有延迟加载的模块：
@NgModule({
imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpClientModule,
    DataEntryModule,
    UpdateModule,
    SupportModule,

    CtaModule,
    HeaderModule,
    HomeScreenModule,

    RoutingAppModule
],

你能分享你的根模块装饰配置吗ngModule（{…
@ibenjelloun当然。我在上面添加了它们。谢谢！你有登录组件模块吗？@alokstar没有。LoginComponent
是在AppModule
@EricR中声明的。我实际上是指根模块而不是路由模块。谢谢。我会试试看！