Angular2：Child Componet中的多個路由器插座

我正在創建ng2版本的scotch.io的angular-ui-router tutorial。我能夠實現home和about頁面的基本導航。在home我能夠爲兒童創建導航，即list和paragraph。我卡在about頁面。我能夠導航到關於頁面，但我無法在其相應的插座中呈現component的about。這是我在做什麼：Angular2：Child Componet中的多個路由器插座

about.component.html

<div class="jumbotron text-center"> 
    <h1>The About Page</h1> 
    <p>This page demonstrates <span class="text-danger">multiple</span> and <span class="text-danger">named</span> views.</p> 
</div> 
<div class="row"> 
    <div class="col-sm-6"> 
     <router-outlet name="aboutOne"></router-outlet> 
     <router-outlet name="aboutTwo"></router-outlet> 
    </div> 
</div>

about.routes.ts

export const aboutRoutes: Routes = [ 
    { 
     path: 'about', 
     component: AboutComponent, 
     children: [ 
      { 
       path: 'about', 
       outlet: 'aboutOne', 
       component: AboutOneComponent 
      }, 
      { 
       path: 'about', 
       outlet: 'aboutTwo', 
       component: AboutTwoComponent 
      } 
     ] 
    } 
];

約-routing.module.ts

import { NgModule } from '@angular/core'; 
import { RouterModule } from '@angular/router'; 

import { aboutRoutes } from './about.routes'; 
@NgModule({ 
    imports: [RouterModule.forChild(aboutRoutes)], 
    exports: [RouterModule] 
}) 
export class AboutRoutingModule { 

}

我不知道我在想什麼。關於頁面正在呈現，但它不是呈現它的子組件，也沒有控制檯中的錯誤。這裏是完整的github repo。

來源

2017-02-12 Hitesh Kumar

玩過名爲<router-outlet>後，我明白了。我沒有給出正確的道路。因爲當用戶登陸到about頁面時，我的兩個組件都應該呈現在其相應的插座中。兩者都沒有相對的網址/路徑。他們是about的默認子女。所以我將我的path:'about'更新爲path:''。它開始工作。希望這會對某人有所幫助。

about.routes.ts

export const aboutRoutes: Routes = [ 
    { 
     path: 'about', 
     component: AboutComponent, 
     children: [ 
      { 
       path: '', 
       outlet: 'aboutOne', 
       component: AboutOneComponent, 
       pathMatch: 'full' 
      }, 
      { 
       path: '', 
       outlet: 'aboutTwo', 
       component: AboutTwoComponent, 
       pathMatch: 'full' 
      } 
     ] 
    } 
];

@Pradeep感謝突出path問題。

來源

2017-02-12 08:12:01

嘿@hitesh最可能的錯誤是在路由的有關組件，您在這兩個組件使用的路徑相同的名稱，以及父母一個，請改變這一點，試試這樣

export const aboutRoutes: Routes = [ 
    { 
     path: 'about', 
     component: AboutComponent, 
     children: [ 
      { 
       path: 'aboutOne', 
       outlet: 'aboutOne', 
       component: AboutOneComponent 
      }, 
      { 
       path: 'aboutTwo', 
       outlet: 'aboutTwo', 
       component: AboutTwoComponent 
      } 
     ] 
    } 
];

魔法門在這種情況下，angular會嘗試在URL的基礎上加載組件，因爲在每種情況下都會找到about，所以在這種情況下子組件可能不會呈現。

來源

2017-02-12 07:24:30

謝謝你的回答。事情是'aboutOne'和'aboutTwo'不是路線，但它們是視圖，你可以看到scotch.io教程。 http://embed.plnkr.co/IzimSVsstarlFviAm7S7/preview它只有兩個'ui-view'，路徑模板落入這些視圖。我想用router-outlet做類似的事情。我的組件在相同的路線 –

進入相應的插座，你會請你在一些plunker重新創建你的問題？ –

我有回購碼。 https://github.com/hk-skit/angular2routing你可以看看它。我使用angular-cli創建了回購。所以將它移動到plunkr將會非常耗時。 –

Angular2：Child Componet中的多個路由器插座

回答

相關問題