Angular2：兒童路線

我有一個家庭組件，我想隨時展示。這是一個下拉菜單。當點擊菜單中的項目時，下面會彈出一個表單。我希望下拉列表隨時顯示。本來我設計這樣的：Angular2：兒童路線

我-app.html

<div> 
    <dropdown-selector></dropdown-selector> 
    <router-outlet></router-outlet> 
</div>

路由工作得很好，但我一直得到Error: Cannot match any routes: ''(…)即使我有我的index.html中定義的base標籤。

然後，我認爲我應該定義下拉菜單作爲父路線，並將所有下拉菜單項路線作爲其子項。

APP-routes.ts摘錄

export const APPLICATION_ROUTES: RouterConfig = [ 
    { 
     path: '', 
     component: Home, // dropdown-selector is inside this component 
     children: [ 
      {path: 'forms/1', component: Form1}, 
      {path: 'forms/2', component: Form2}, 
      {path: 'forms/3', component: Form3}, 
      {path: 'forms/4', component: Form4}, 
      {path: 'forms/5', component: Form5}, 
      {path: 'forms/6', component: Form6}, 
      {path: 'forms/7', component: Form7}, 
      {path: 'forms/8', component: Form8} 
     ] 
    } 
];

然後重新定義我的-app.html ...

我-app.html

<div> 
    <router-outlet></router-outlet> 
</div>

我一直無論如何都會得到相同的錯誤，但現在下拉菜單甚至不會顯示。另外，對於新路由器，我認爲沒有辦法設置默認路由。我假定''是默認路由。我正在使用Angular2 RC.4。

我在設計這個錯誤的方式嗎？這個錯誤是怎麼回事？我看到很多關於它的SO帖子，但是他們都沒有解決我的問題。

來源

2016-08-12 DankestMemes

首先，我想你的第一個設計是你想要的，因爲我有我的解決方案相同的行爲：

我希望我的頁眉和頁腳來顯示所有的時間，並通過組件導航頁面的中間。

<headerComponent></headerComponent> 
<router-outlet></router-outlet> 
<footerComponent></footerComponent>

我們你的主要問題，這是

Error: Cannot match any routes: ''(…)

我需要更多的代碼，告訴您如何與您的路由器導航，但我會給你以下提示：

這意味着，當你啓動你的應用程序，網址如下所示：

http://localhost:39351/

，因此該路徑是空的：「」

您需要定義一個路由來管理情況，以及（如果你需要，我想你不要在這種情況下）。例如，當我啓動我的應用程序，我希望它加載默認的成分，我這樣做的：

{ path: '', redirectTo: '/login', pathMatch: 'full' }, 
{ path: 'login', component: LoginComponent },

在你的情況，似乎要在點擊顯示您的形式和然後通過點擊訪問該路線。要做到這一點，你需要管理的點擊這樣在您的下拉菜單，選擇組件HTML：

<button type="button" (click)="navigate('btn_home')"> 
</button>

然後告訴路由器瀏覽到您的路徑：

navigate(elementID) { 
     switch (elementID) { 
       case 'btn_home': 
        this.router.navigate(['/master']); 
        break; 
       default: 
        break; 
     } 
}

希望這有助於。

來源

2016-08-12 14:56:20

它工作:)，但我想配置路徑去「鬼」組件。我不想在那裏展示任何東西。雖然我不喜歡那個想法的聲音。 – DankestMemes

在我自己的解決方案中，我實際上有一個管理身份驗證的主要，然後我有第二個（我上面粘貼的那個）管理應用程序的其餘部分。在這種情況下，您需要將第二個插座定義爲第一個插座的子插座。你應該在路由器上看到Angular2文檔來幫助你做到這一點。如果這是一個被接受的答案，請標記它，我會非常感激。如果您需要更多幫助，請不要猶豫在另一篇帖子上提出另一個問題。 –

Angular2：兒童路線

回答

相關問題