Angular 2投擲錯誤：Outlet未啓動

我已經設置了我的應用程序，因此我有一個Recipe Book，它有一個列表Recipies，當我單擊食譜時，它會在嵌套路線中顯示Recipe Details。這也有一個按鈕，當點擊時在Recipes Details內的嵌套路線中加載成分。Angular 2投擲錯誤：Outlet未啓動

到目前爲止，路由似乎工作，除非我嘗試導航到另一個Recipe。如果Ingredients托盤（路線）是活動的，那麼它會改變配方和摺疊Ingredients路線，如果我再嘗試和導航（不打開配料）我收到以下錯誤：

Uncaught (in promise): Error: Outlet is not activated 
Error: Outlet is not activated

它看起來像我的路由器需要Ingredients才能激活，否則它不理解嵌套路由。這是我的承諾，但不知道如何解決它或當我錯了。

單食譜書，page.component.html

<app-tray class="recipe-list"> 
    <app-recipe-list [recipe]="recipe"></app-recipe-list> 
</app-tray> 
<router-outlet></router-outlet>

偏方detail.component.html

<app-tray class="recipe"> 
    The routing has worked and loaded recipe. 
</app-tray> 
<router-outlet></router-outlet>

成分，list.component.html

<app-tray class="ingredients-list"> 
    Recipe Ingredients have loaded. 
</app-tray>

個

app.routes.ts（更新）

export const routerConfig : Route[] = [ 
    { 
    path: 'recipe-books', 
    children: [ 
     { 
     path: ':id', component: SingleRecipeBookPageComponent, 
     children: [ 
      { 
      path: 'recipes', 
      children: [ 
       { path: ':id', component: RecipeDetailComponent, 
       children: [ 
        { path: '', component: IngredientsListComponent }, 
        { path: 'ingredients', component: IngredientsListComponent } 
       ] 
       }, 
       { path: 'new', component: IngredientsListComponent }, 
       { path: '', component: RecipeDetailComponent } 
      ] 
      }, 
      { path: '', redirectTo: 'recipes', pathMatch: 'full' } 
     ] 
     }, 
     { path: '', component: RecipeBooksPageComponent } 
    ] 
    }, 
    { path: 'ingredients', component: IngredientsComponent }, 
    { path: '', redirectTo: 'recipe-books', pathMatch: 'full' }, 
    { path: '**', redirectTo: 'recipe-books', pathMatch: 'full' } 
];

來源

2016-11-03 Daimz

這些路線應該做什麼？ –

您沒有將'pathMatch：'full''添加到2個空路徑子路由。你可以在Plunker中重現嗎？ –

即使他們有一個組件，我應該仍然添加'pathMatch：full'？ – Daimz

這條路線是無效的，你應該得到一個錯誤吧。

{ path: '' },

路線要麼需要有一個component，一個redirectTo，或children。

如果一條空路徑沒有子節點，它也應該有pathMatch: 'full'。

我想你想要的是

{ path: '', component: DummyComponent, pathMatch: 'full' },

哪裏DummyComponent與空視圖組件。您可以對所有這些路徑重複使用相同的DummyComponent。

來源

2016-11-11 20:38:09

爲了清晰起見，我已經在這個問題上搜索了互聯網，並且迄今爲止錯過了一個重要的觀點，事實上在我遵循的教程中，他們使用'{path：''}'，所以這一直很混亂試圖學習。 – Daimz

你能解決所有問題還是仍然有東西不能按預期工作？ –

用新的路由更新了我的代碼。我現在可以在'食譜書籍>單一配方>配料'之間導航，沒有出口錯誤。但是現在，如果我訪問'配方1'，配料不顯示（這是正確的，它應該只顯示當我點擊配料按鈕，它會轉到'recipe-books/1/recipe/1/notes'），如果我點擊配料顯示的按鈕。完善！然後我點擊'食譜2'（成分仍然活躍）我得到'食譜2'，但與'食譜1'成分。如果現在點擊「配料」按鈕「配方2s」配料負載。任何想法，我可能會出錯？ – Daimz

Angular 2投擲錯誤：Outlet未啓動

回答

相關問題