Angular2：子供のルート

Question

私は常時表示したい家のコンポーネントがあります。ドロップダウンメニューです。メニューのアイテムがクリックされると、フォームが下にポップアップします。私は常にドロップダウンを表示したい。

私-app.html

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

ルーティングがうまく働いたが、私は私が私のindex.htmlで定義されたbaseタグを持っているにもかかわらずError: Cannot match any routes: ''(…)を取得保管：もともと私はこのようにそれを設計しました。

次に、ドロップダウンを親ルートとして定義し、すべてのドロップダウンアイテムルートをその子にする必要があると考えました。

アプリ-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

まず第一に、私は私が私の解決策で同じ動作を持っているとして、あなたの最初のデザインは、あなたが欲しいものだと思いますページの真中。

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

であるあなたの主な問題に今

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

---

私はあなたのルータに移動する方法を示してより多くのコードが必要だろうが、私はあなたに、次のヒントを与える：

を

アプリを起動すると、URLは次のようになります。

http://localhost:39351/ 

したがって、パスは空です： ''

このケースを管理するためのルートも定義する必要があります（この場合は必要ないと思います）。私は私のアプリを起動したとき例えば が、私はそれがデフォルトでコンポーネントをロードしたい、と私はそれをそのように実行します。あなたの場合

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

を、それはあなたがクリックでフォームを表示するようだと、クリックしてそのルートにアクセスします。その後、

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

そして、あなたのパスに移動するようにルータを教えて：

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

希望これが役立つことを行うには、あなたのドロップダウン・セレクター・コンポーネントHTMLでは、このようなクリックを管理する必要があります。