パス名が

Question

私は次のエラーを得ていた私のアプリをナビゲートしようとしているときのように、私のAngular2アプリへのコンポーネントのルータを統合するいくつかの問題を経験していましたそう

children: [ 
    { 
     path: ':id', 
     component: DetailMoreLayout 
    }, 
    { 
     path: '', 
     redirectTo: 'parent-path', 
     pathMatch: 'full' 
    } 
] 

だから私のアプリで、私は次のルートを持っているようにStackOverflowからいくつかのアドバイスや公式ドキュメントと私は私のルートに私の子供のルートにリダイレクトオブジェクトを適用します。私はRouteオブジェクトを拡張して作られたカスタムタイプであるDisplayRoutesに注意してください。

export const routes:DisplayRoutes = [ 
    { 
     path: '', 
     display: 'Home', 
     component: HomeComponent 
    }, { 
     path: 'about-us', 
     display: 'About Us', 
     component: LeftSubNavigation, 
     index: { 
      component: DetailMoreLayout 
     }, 
     children: [ 
      { 
       path: ':id', 
       component: DetailMoreLayout 
      }, 
      { 
       path: '', 
       redirectTo: 'about-us', 
       pathMatch: 'full' 
      } 
     ] 
    }, { 
     path: 'teams', 
     display: 'Teams', 
     component: LeftSubNavigation, 
     index: { 
      component: DetailMoreLayout 
     }, 
     children: [ 
      { 
       path: ':id', 
       component: DetailMoreLayout 
      }, 
      { 
       path: '', 
       redirectTo: 'teams', 
       pathMatch: 'full' 
      } 
     ] 
    }, { 
     path: 'careers', 
     display: 'Careers', 
     component: LeftSubNavigation, 
     index: { 
      component: DetailMoreLayout 
     }, 
     children: [ 
      { 
       path: ':id', 
       component: DetailMoreLayout 
      }, 
      { 
       path: '', 
       redirectTo: 'careers', 
       pathMatch: 'full' 
      } 
     ] 
    }, { 
     path: 'press', 
     display: 'Presse', 
     component: LeftSubNavigation, 
     index: { 
      component: DetailBlogLayout 
     }, 
     children: [ 
      { 
       path: ':id', 
       component: DetailBlogLayout 
      }, 
      { 
       path: '', 
       redirectTo: 'press', 
       pathMatch: 'full' 
      } 
     ] 
    }, { 
     path: 'technology', 
     display: 'Technology', 
     component: LeftSubNavigation, 
     index: { 
      component: DetailBlogLayout 
     }, 
     children: [ 
      { 
       path: ':id', 
       component: DetailBlogLayout 
      }, 
      { 
       path: '', 
       redirectTo: 'technology', 
       pathMatch: 'full' 
      } 
     ] 
    }, { 
     path: 'promotion', 
     display: 'Promotion', 
     component: LessLayout 
    }, { 
     path: 'contact', 
     display: 'Contact', 
     component: LeftSubNavigation, 
     index: { 
      component: DetailMoreLayout 
     }, 
     children: [ 
      { 
       path: ':id', 
       component: DetailMoreLayout 
      }, 
      { 
       path: '', 
       redirectTo: 'contact', 
       pathMatch: 'full' 
      } 
     ] 
    } 
]; 

すべてが今クールですが、私は、ルートまたはコンポーネントの使用.navigateByUrl(route)にリンクするために私のHTMLテンプレートにrouterLinkディレクティブを使用する必要がありますか。 navigate([route])メソッド私のURL /パスが複製されるのでhttp://localhost:4200/about-us/はhttp://localhost:4200/about-us/about-usになります。 http://localhost:4200/about-usに直接または「ディープリンク」すると、ブラウザでURLが変更されますhttp://localhost:4200/about-us/about-us

私は何をしていますか？誰でも見ることができますか？私はpathMatch: 'full'をpathMatch: 'prefix'に設定しようとしましたが、これは動作しません。私は使用しています"@angular/router": "3.0.0-beta.2"

Answer 1

私は新しいルータでたくさん遊んでいないので、完全にはわかりませんが、redirectTo: '../about-us'にリダイレクトする必要があると思われます。それは親routerに移動し、そこでのabout-usパスを検索します。この方法：

export const routes:DisplayRoutes = [ 
    { 
     path: '', 
     display: 'Home', 
     component: HomeComponent 
    }, { 
     path: 'about-us', 
     display: 'About Us', 
     component: LeftSubNavigation, 
     index: { 
      component: DetailMoreLayout 
     }, 
     children: [ 
      { 
       path: ':id', 
       component: DetailMoreLayout 
      }, 
      { 
       path: '', 
       redirectTo: '../about-us', //<-- here 
       pathMatch: 'full' 
      } 
     ] 
    }, 
    ... 
] 

Answer 2

私はあなたがあなたのアプリケーションでは、古典的なマスター・ディテール・パターンを実装しているし、それがcomponentlessルータの完璧なユースケースだと思います。

2つのルーターコンセントを左右に使用し、そこにロードするには、親テンプレートをリファクタリングする必要があります。

は、この優れたarticle

追記を参照してください：アプリケーションの現在の行動を構成して、インラインです。
ロケーションバーに/about-usと入力すると、''ルータが検索され、about-usにもう一度行くと言うので、再びabout-usを追加します。