2015-12-31 19 views
6

私はangle2を使って単一のページアプリケーションを構築しています。アプリケーションのルーティングに応じて別のアプリケーションテンプレートをレンダリングする必要があります。最高レベルでは、メインアプリケーションテンプレートとアプリの管理テンプレートを切り替えることができるはずです。URLパスに追加のスラッシュを入れずにangular2入れ子コンポーネントをルーティングする方法

ルーティングルール:

  • URLパスは、AUTH、何かで始まる場合は、MainAppに
によって処理されなければならないAuthApp
  • で扱うの/で始まる場合

    実装:

    thi ■私は最高レベルのコンポーネントアプリケーションを持っており、このようにAuthAppまたはMainAppに責任を委任しています。

    @RouteConfig([ 
        { 
        path: '/auth/...', 
        component: AuthApp, 
        as: 'Auth' 
        }, 
        { 
        path: '/...', 
        component: MainApp, 
        as: 'Main' 
        } 
    ]) 
    

    次に、各サブアプリケーション(AuthApp、MainAppなど)には、このような独自のルート定義があります。

    @RouteConfig([ 
        { path: '/current-vacancies', CurrentVacancies, as: 'CurrentVacancies', useAsDefault: true }, 
        { path: '/candidates/create', CandidateCreate, as: 'CandidateCreate'}, 
        ... 
    ]) 
    

    機能的にもデザインの観点からも、この機能は素晴らしいです!

    問題:メインのアプリで

    、アプリケーションのルートの設定は、パスを指定していない(例えば/... => MainAppには)私は、ネストされたURLパスを望んでいません。たとえば、アプリケーション(routerLink)経由でCurrentVacanciesにナビゲートすると、URLが更新され、不要なスラッシュが追加されます。 .../#/current-vacanciesを読みたい場合は、URLパスは.../#//current-vacanciesのようになります。

    実際のアプリケーションルーティングは、アドレスバーに.../#/current-vacanciesと入力すると正しく動作しますが、正しく移行します。それでも、アプリケーションrouterLinkディレクティブを介してナビゲートすると、不要なスラッシュが追加されます。

    なぜこれが起こっているのか、私は論理的に理解していますが、MainAppに委譲するルートコンポーネントは '/'のパスを持ち、子コンポーネントと連結して完全なURLパスを形成します。しかし、この例では、スラッシュを追加することは望ましくありません。どのように私はそれを削除するか、または何とかこの動作をオーバーライドする任意のアイデア。

    Btw、MainAppコンポーネントのルーティングを一番上のレベルに移動することを検討しましたが、これは私が報告しているURLパスの問題を解決しますが、トップレベルでテンプレートを切り替えることはできません。要約

    デザインアプリは切り替えトップレベルのテンプレートを持ってする方法をメインアプリルート上"preferred option"、または

  • を不要/を削除する方法のいずれか、で私を助けてください

    • ネストされたコンポーネントルーティングを使用します。

    おかげ

  • +1

    この問題は[プルリクエスト](https://github.com/angular/angular/pull/5724)です。 –

    +0

    それは私のために十分です、うまくいけば、それは次のベータリリースにそれを行います。少しでもお待ちしておりますが、これはとても新しいものです。 –

    答えて

    2

    これが今日(角度4)作業、角2ファイナルがリリースされる前に修正されているように思われます。

    関連する問題