Angular2: Детские маршруты

Question

У меня есть домашний компонент, который я хотел бы отображать навсегда. Это выпадающее меню. Когда элемент в меню щелкнут, появляется форма. Я хочу, чтобы выпадающее меню отображалось в любое время. Первоначально я проектировал это так:

мой-app.html

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

Маршрутизация работает нормально, но я продолжал получать Error: Cannot match any routes: ''(…), даже если у меня есть base тег, определенный в моем index.html.

Тогда я думал, что я должен определить выпадающее меню в качестве родительского маршрута, и все маршруты выпадающего списка будут его дочерними.

приложение-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, адресованных ему, но никто из них не решил мою проблему.

Answer 1

Прежде всего, я думаю, что ваш первый дизайн, что вы хотите, как и у меня такое же поведение на мое решение:

Я хочу, чтобы мой верхний и нижний колонтитулы будут отображаться все время, и перемещаться по компонентам в в середине страницы.

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

---

Теперь главной проблемой, которая

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

мне нужно больше кода, который показывает, как вы ориентируетесь с маршрутизатором, но я дам вам следующие советы:

Это означает, что при запуске приложения URL-адрес выглядит следующим образом:

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; 
     } 
} 

Надеется, что это помогает.