直接在angular4中路由到特定路由URL

Question

我项目的项目结构。我正在按照角度指南在此处以模块形式安排您的项目。 https://angular.io/guide/router#milestone-4-crisis-center-feature

应用-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 目前有这个

<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 class 和 LoginComponent class 的 ngOninit() 中看到 console.log 但 HTML 没有加载。没有错误显示。如果我不导入 PortalModule class 则不会显示任何内容。任何帮助是极大的赞赏。

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

Routing to a specific route URL directly in angular4

routing

url-routing

angular

angular-router