2

このルート構成を取得したとしましょう：

{ path: 'contact', component: ContactComponent, children: [
    { path: ':id', component: ContactDetailComponent },
    { path: 'chat', component: ContactChatComponent, outlet: 'chat' }
]}

に移動すると

/contact/7

contact Detail に到着しましたが、そこから aux route に移動するにはどうすればよいですか? つまり、何を入れる必要があり[routerLink]ますか？

次のような絶対URLを使用して簡単にアクセスできることを知っています

/contact/(7//chat:chat)

しかし、ここで相対リンクを使用する必要がある場合はどうすればよいでしょうか? それはどのような形をとらなければなりませんか？私はもう試した

[routerLink]="['chat:chat']"
[routerLink]="['//chat:chat']"
[routerLink]="['(7//chat:chat)']"

などですが、実際に機能するリンクを作成するものはありません (上記を参照)。

私はルーター 3.0.0-beta2 で RC4 を使用しています。

4

1 に答える 1

0

わかりました。バグが 1 つまたは 2 つある[routerLink]ようです。そのため、回避策を考え出す必要がありました。元の質問へのコメントで既に示唆したように、モーダル ダイアログに移動するためにこれらの補助ルートを使用します。

/contacts

連絡先のリストが表示され、

/(contacts//aux:new)

同じコンテナー内でレンダリングしてリストを非表示にするのではなく、連絡先のリストの上にモーダル ダイアログを開くことになっています。

ダミーコンポーネントを導入して同じ効果を達成しました

import { Component } from '@angular/core';

@Component({
    selector: 'aux-route-workaround',
    template: ''
})
export class AuxRouteWorkaroundComponent { }

ルーティング構成は次の形式になります。

export const ContactsComponentRoutes = [
    { 
        path: 'contacts', 
        component: ContactsComponent,
        children: [
            { path: '', component: AuxRouteWorkaroundComponent },
            { path: 'new', component: NewContactComponent }
        ]
    } 
];

そしてのテンプレートContactsComponentは

template: `
    <contacts-list></contacts-list>
    <router-outlet></router-outlet>
`

だから今私がナビゲートするなら

/contacts

これは、ワークアラウンド コンポーネント (そのテンプレートは空であるため、ビューには何も追加されません) と同様に、''アクティブ化、つまりレンダリングされます。ContactListComponent

使用する

[routerLink]="['new']"

その後、（相対的に）ナビゲートできます

/contacts/new

今回は、補助ルートを使用する場合と同様に、ダイアログ コンポーネントが に対してレンダリングされ、<router-outlet>両方のコンポーネントが表示され、同じ親コンポーネント内にContactsListComponent表示されます。NewContactComponent

任務完了。

于 2016-07-13T14:52:55.187 に答える