2017-02-15 10 views
4

スラッシュ私は2つの店舗を持っているアプリのコンポーネントがあります。角度2追加末尾には、複数のルータ・アウトレットではURLに

template: '<router-outlet></router-outlet><router-outlet name="popup"></router-outlet>'

を私は、ルーティングとrouterLinksを作成するthis linkの例を踏襲し、すべてが正常に動作しますrouterLinkがappコンポーネント内にある限りしかし、すべてのページで再利用できるように、メインレイアウトコンポーネントをメニュー内に作成し、loadChildrenを使用して対応するモジュールとコンポーネントを内部にロードしました。

<app-main-menu></app-main-menu> 
<h1> 
    {{title}} 
</h1> 
<div class="container"> 
    <router-outlet></router-outlet> 
</div> 

問題は、私は、メニューの中にポップアップコンセントのrouterLinksを移動すると、それがメインルートと結果のURLの末尾にスラッシュが動作しない含まれていることです。それはアプリのコンポーネントと'localhostの/ mainroute /(ポップアップ:ログイン')に配置されている場合したがって、たとえば、このrouterLink:

<a [routerLink]="[{ outlets: { popup : ['login'] } }]">Login</a> 

は、URL を作成し、 'localhost /をmainroute(ログインポップアップ')メニューコンポーネントに配置されている場合最初のURLは動作しますが

は、2番目のURLはエラーを生成します。 エラー:任意のルートを照合することはできません:「mainroute」は違った2例を扱い、なぜ私は理解していない

。私はまた、たとえURLが'localhost/mainroute /'であっても、2番目に生成されたURLは末尾のスラッシュのためではないことを理解していません。

誰かが私を助けることができますか?

+1

当面は回避策が見つかりました。私はそれを指し示す関数とリンクを作成しました。リンクは** Login **のようになり、このような構造でインポートされたルータを使用して、末尾にスラッシュのないURLを取得します。** public openLogin():void { this.router.navigateByUrl(this.router .url + '(ポップアップ:ログイン)'); } ** – Martinator

答えて

1

これは全く同じ動作を説明しているissueです。どうやらそれは開発者の注目を集めており、正しい行動であると考えています。同じルータリンク式は、使用されている場所によって異なる結果を生成する可能性があります。

<a [routerLink]="['../', { outlets: { popup: 'login' } }]"> 

または絶対このようなリンクを使用する:絶対リンクが働いてここで説明した場合において

<a [routerLink]="['/', { outlets: { popup: 'login' } }]"> 

および

提案された解決策は、このような相対リンクを使用することです右のリンクを与えました。

私はまだ動作を理解していません。だから誰かがそれについての良い説明があれば、詳しく説明してください。

関連する問題