95

同じテンプレートに複数のルーター アウトレットを含めることはできますか?

はいの場合、ルートを構成する方法は?

angular2 ベータ版を使用しています。

4

8 に答える 8

63

はい、できますが、AUX ルーティングを使用する必要があります。ルーターアウトレットに名前を付ける必要があります。

<router-outlet name="auxPathName"></router-outlet>

ルート構成をセットアップします。

@RouteConfig([
  {path:'/', name: 'RetularPath', component: OneComponent, useAsDefault: true},
  {aux:'/auxRoute', name: 'AuxPath', component: SecondComponent}
])

この例とこのビデオもチェックしてください。

RC.5 Aux ルートの更新が少し変更されました: ルーター アウトレットで次の名前を使用します。

<router-outlet name="aux">

ルーター構成で：

{path: '/auxRouter', component: secondComponentComponent, outlet: 'aux'}
于 2016-01-06T20:35:15.390 に答える
19

Aux ルートの構文は、新しい RC.3 ルーターで変更されました。

aux ルートには既知の問題がいくつかありますが、基本的なサポートは利用できます。

名前付きでコンポーネントを表示するルートを定義できます<router-outlet>

ルート構成

{path: 'chat', component: ChatCmp, outlet: 'aux'}

名前付きルーターアウトレット

<router-outlet name="aux">

補助ルートをナビゲートする

this._router.navigateByUrl("/crisis-center(aux:chat;open=true)");

routerLink からの aux ルートのナビゲートはまだサポートされていないようです

<a [routerLink]="'/team/3(aux:/chat;open=true)'">Test</a>

<a [routerLink]="['/team/3', {outlets: {aux: 'chat'}}]">c</a>

まだ自分で試していません

1 つのコンポーネント内の Angular2 ルーターも参照してください。

RC.5 routerLink DSL (パラメーターと同じcreateUrlTree) https://angular.io/docs/ts/latest/api/router/index/Router-class.html#!#createUrlTree-anchor

于 2016-06-29T10:23:36.710 に答える
16

<a [routerLink]="[{ outlets: { list:['streams'], details:['parties'] } }]">Link</a>

<div id="list">
    <router-outlet name="list"></router-outlet>
</div>
<div id="details">
    <router-outlet name="details"></router-outlet>
</div>

`

 {
    path: 'admin',
    component: AdminLayoutComponent,
    children:[
      {
        path: '',
        component: AdminStreamsComponent, 
        outlet:'list'
      },
      {
        path: 'stream/:id',
        component: AdminStreamComponent,
        outlet:'details'
      }
    ]
  }
于 2017-09-07T19:39:49.300 に答える
-1

これは私にとってはうまくいき、かなり簡単でシンプルです。

<div *ngIf="authenticated">
  <ng-container *ngTemplateOutlet="template"></ng-container>
</div>

<div *ngIf="!authenticated">
  <ng-container *ngTemplateOutlet="template"></ng-container>
</div>

<ng-template #template>
  <router-outlet></router-outlet>
</ng-template>

于 2021-08-04T13:38:35.527 に答える