直接在angular4中路由到特定的路由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 中不起作用的组件。

features-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 {}

portal-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></router-outlet>

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

portal.component.html 目前有这个

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

AppModule 快照

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 {}

features.module.ts 的快照

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

portal.module.ts 的快照

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

由于我在 AppModule 中导入了 PortalModule，我可以在 PortalComponent 类和 LoginComponent 类的 ngOninit() 中看到 console.log，但没有加载 HTML。没有显示错误。如果我不导入 PortalModule 类，则不会显示任何内容。 任何帮助是极大的赞赏。

Answer 1

路由器在加载子节点后会将所有路由合并到一个数组中，因此当它将您的 forRoot 配置与 forChild 合并时，您会得到：

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
      }
    ]