1

Web 上には補助ルートに関する情報はほとんどありません。RC5/RC1 についてはさらに少なく、ここ SO の誰かがそれらを機能させることができたことを願っています (修正されているはずですが、それだけです)。 .

次のルーティング宣言を取得しました。

import {
    RouterModule,
    Routes
} from '@angular/router';

import { ContactsComponent } from './contacts.component';
import { NewContactComponent } from './new-contact.component';

const contactsRoutes: Routes = [
    { path: '', component: ContactsComponent },
    { path: 'new', component: NewContactsComponent, outlet: 'form' }
];

export const contactsRouting = RouterModule.forChild(contactsRoutes);

routerLinkこれが次のとおりですoutlet。ContactsComponent

<a [routerLink]="['.', 'form:new']"> 
    <button md-fab class="md-fab">
        <md-icon class="md-24">add</md-icon>
    </button>
</a>
<router-outlet name="form"></router-outlet>

ただし、これは次のようなエラーメッセージにつながるだけです

エラー: どのルートとも一致しません: 'contacts/form%3Anew'

Angular2 RC5/Router3 RC1 の実際の例はありますか?

4

2 に答える 2

2

私は最終的にこれを機能させました (ソースの Luke を使用)。

このルーティング設定を考えると

const appRoutes: Routes = [
    { path: '', redirectTo: 'welcome', pathMatch: 'full' },
    { path: 'welcome', component: WelcomeComponent },
    { path: 'employee/:id', component: EmployeeDetailComponent }
    { path: 'chat', component: ChatComponent, outlet: 'aux' }
];

つまり、ルート パスに aux ルートがある場合 (これは私が言及したひねりです)、次のように記述できます。

<a [routerLink]="['/', { outlets: { primary: 'employee/14', aux: 'chat' } }]"

そしてそれはこのルートに変換されます:

/employee/14(aux:chat)

このリンクをクリックすると、実際にコンポーネントがアウトレットにレンダリングされます。

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

@Component({
    selector: 'my-app',
    template: '<router-outlet></router-outlet><router-outlet name="aux"></router-outlet>'
})
export class AppComponent {}

完全なplnkrはここにあります。

これが子コンポーネントで機能するようになったら、この回答を更新します。

于 2016-08-18T16:45:07.880 に答える
1

私の知る限り、それは次のようなものでなければなりません

<a [routerLink]="[{ outlets: { 'aux': ['/employee/14/chat'] } }]">

https://angular.io/docs/ts/latest/api/router/index/RouterLink-directive.htmlも参照してください。

于 2016-08-18T11:04:58.243 に答える