直接在角度4路由到特定路由URL

Question

我的项目的项目结构。我正在关注angulars指南，以便在此处安排您的项目。 https://angular.io/guide/router#milestone-4-crisis-center-feature

APP-routing.module.ts

const routes: Routes = [ 
    { 
    path: 'portal', 
    canActivate: [RuntimeEnvironmentService], 
    loadChildren: 'app/portal/portal.module#PortalModule', 
    }, 
    { 
    path: '', 
    canActivate: [RuntimeEnvironmentService], 
    loadChildren: 'app/features/features.module#FeaturesModule', 
    } 

]; 

@NgModule({ 
    imports: [ 
    RouterModule.forRoot(routes, { 
     preloadingStrategy: environment.preloadAllLazyLoadedModules 
     ? PreloadAllModules 
     : NoPreloading, 
    }), 
    ], 
}) 
export class AppRoutingModule {} 

如果用户导航至http://localhost:4200我希望用户被定向到FeaturesModule的正常工作。

但是，当用户导航到http://localhost:4200/portal我希望该用户被定向到PortalModule中不起作用的组件。的特点，routing.module.ts

const routes: Routes = [ 
    { 
    path: '', 
    component: FeaturesComponent, 
    children: [ 
     { 
     path: 'map-page', 
     component: MapPageComponent 
     }, 
     { 
     path: '', 
     redirectTo: 'map-page', 
     pathMatch: 'full' 
     } 
    ] 
    } 
]; 

@NgModule({ 
    imports: [RouterModule.forChild(routes)], 
}) 
export class FeaturesRoutingModule {} 

快照门户routing.module.ts的

快照

const routes: Routes = [ 
    { 
    path: 'portal', 
    component: PortalComponent, 
    children: [ 
     { 
     path: '', 
     component: LoginComponent 
     } 
    ] 

    } 
]; 

@NgModule({ 
    imports: [RouterModule.forChild(routes)] 
}) 
export class PortalRoutingModule { } 

app.component.html只是有什么，但只有一个路由器出口标签

<router-outlet></router-outlet> 

features.component.html拥有自己的html和一个router-outlet标签来显示地图组件。

portal.component.html有这样的时刻的AppModule的

<p> 
    portal works! Why this is not displayed !!! 
    <router-outlet></router-outlet> 
</p> 

快照features.module.ts的

import { environment } from 'environments/environment'; 
import { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { CoreModule } from './core/core.module'; 
import { SharedModule } from './shared/shared.module'; 
import { PortalModule } from './portal/portal.module'; 

@NgModule({ 
    declarations: [AppComponent], 
    imports: [ 
    BrowserModule, 
    CoreModule, 
    SharedModule, 
    PortalModule, 
    AppRoutingModule 
    ], 
    providers: [ 
    // use hash location strategy or not based on env 
    { 
     provide: LocationStrategy, 
     useClass: environment.hashLocationStrategy 
     ? HashLocationStrategy 
     : PathLocationStrategy, 
    }, 
    ], 
    bootstrap: [AppComponent], 
}) 
export class AppModule {} 

快照

@NgModule({ 
    imports: [ 
      SharedModule, 
      FeaturesRoutingModule, 
      AgmCoreModule.forRoot({ 
       apiKey: 'AIzaSyAzGVaB4-VPQvIKlhcxz_uy2ft8uCPMZP4' 
      }) 
    ], 
    declarations: [ 
      FeaturesComponent, 
      MapPageComponent, 
    ], 
    providers: [ 
      SkymeetService 
    ] 
}) 
export class FeaturesModule {} 

快照门户.module.ts

@NgModule({ 
    imports: [ 
    SharedModule, 
    PortalRoutingModule 
    ], 
    declarations: [ 
    PortalComponent, 
    LoginComponent 
    ] 
}) 
export class PortalModule { } 

由于我在AppModule中导入了PortalModule，因此我可以在PortalComponent类和LoginComponent类的ngOninit（）中看到console.log，但HTML不会被加载。没有显示错误。如果我不导入PortalModule类，则不显示任何内容。 任何帮助，不胜感激。

Answer 1

路由器合并所有路由到一个数组一次加载的孩子，所以当它融合了forChild您forRoot配置你：

const routes = [ 
    { 
     path: 'portal', 
     canActivate: [RuntimeEnvironmentService], 
     children: { 
      path: 'portal', 
      component: PortalComponent, 
      children: [ 
       { 
        path: '', 
        component: LoginComponent 
       } 
      ] 
     } 

所以导航到PortalComponent，路线应该是：

portal/portal 

如果您只想使用/portal，则需要将forChild配置更改为：

const routes: Routes = [ 
    { 
    path: '', 
    component: PortalComponent, 
    children: [ 
     { 
     path: '', 
     component: LoginComponent 
     } 
    ]