Question

我项目的项目结构。我正在遵循安全指南，在这里安排您的项目模块。 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>

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

直接以angular4路由到特定路由URL

1 个答案: