Question

所以我有一些路线是儿童路线的孩子。您可以在下面看到我有app.routes root，然后是async.routes（＆＃39; httprx＆＃39;），它们是app.routes的子项，然后是spotify.routes，它们是异步的子项。路由。

如果我嵌套一层深，即

，它就可以了

localhost:4000/#/httprx/http-examples

将httpExamples组件加载到async.component的路由器插座中。都好。问题是如果我导航到

localhost:4000/#/httprx/spotify/search

它将spotify组件加载到app.components router-outlet中，替换async.component。我不知道为什么要这样做。我想这与spotify.routes有关。

app.routes.ts

export const routes: Routes = [
  {path: '', redirectTo: 'forms', pathMatch: 'full'},
  {path: 'forms', loadChildren: 'src/app/forms/forms.module#FormExamplesModule'},
  {path: 'httprx', loadChildren: 'src/app/http-rxjs/async.module.ts#HttpRxJsModule'},
];
export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

async.routes.ts

const routes: Routes = [
  {
    path: 'httprx',
    component: MainHttpRxJs,
    children: [
      {path: '', redirectTo: 'http-examples',  pathMatch: 'full'},
      {path: 'http-examples', component: HttpExamples},
      {path: 'spotify', component: SpotifyDemoApp}
    ]
  },
];
export const routing: ModuleWithProviders = RouterModule.forChild(routes);

async.component.ts

@Component({
  template: `
    <div>
      <nav>
        <a routerLink="http-examples" routerLinkActive="active">Http/RxJs Searches</a>
        <a routerLink="spotify" routerLinkActive="active">Spotify</a>
      </nav>
      <div id="container">
        <router-outlet></router-outlet>
      </div>
    </div>
`
})

spotify.routes.ts

const routes: Routes = [
  {
    path: 'httprx/spotify',
    component: SpotifyDemoApp,
    children: [
      {path: '', redirectTo: 'search',  pathMatch: 'full'},
      { path: 'search', component: SearchComponent }
    ]
  },
];
export const routing: ModuleWithProviders = RouterModule.forChild(routes);

spotify.component.ts

@Component({
  template: `
     <div class="spotify-component">
         <h4>Spotify</h4>
        <router-outlet></router-outlet>
    </div>
  `
})

如何在Angular 2

0 个答案: