同じテンプレート内のAngular2複数ルーターアウトレット

Question 1

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

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

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

Question 2

はい、できますが、Auxルーティングを使用する必要があります。ルーターのコンセントに名前を付ける必要があります。

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

ルート設定を設定します。

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

この例をチェックしてください：http：//plnkr.co/edit/JsZbuR？p = Preview このビデオも：https：//www.youtube.com/watch？v = z1NB-HG0ZH4＆feature = youtu.be

RC.5 Auxルートの更新が少し変更されました：ルーターアウトレットで名前を使用してください：

<router-outlet name="aux">

ルーター構成：

{path: '/auxRouter', component: secondComponentComponent, outlet: 'aux'}

Question 3

ルーターを構成し、ルーターアウトレットに名前を付けることで、同じテンプレートに複数のルーターアウトレットを含めることができます。これは、次のように実現できます。

以下のアプローチの利点は、それを使用して汚いURLを回避できることです。例：/ home（aux：login）など。

ロード時にappComponentをブートストラップしていると仮定します。

app.component.html

<div class="layout">
    <div class="page-header">
        //first outlet to load required component
        <router-outlet name='child1'></router-outlet>
    </div>
    <div class="content">
        //second outlet to load required component
        <router-outlet name='child2'></router-outlet>
    </div>
</div>

ルーターに以下を追加します。

{
    path: 'home',  // you can keep it empty if you do not want /home
    component: 'appComponent',
    children: [
        {
            path: '',
            component: childOneComponent,
            outlet: 'child1'
        },
        {
            path: '',
            component: childTwoComponent,
            outlet: 'child2'
        }
    ]
}

/ homeがロードされると、appComponentは割り当てられたテンプレートでロードを取得し、Angularルーターはルートをチェックし、名前に基づいて指定されたルーターアウトレットに子コンポーネントをロードします。

上記のように、同じルートに複数のルーター出口を持つようにルーターを構成できます。

Question 4

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

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

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

ルート設定

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

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

<router-outlet name="aux">

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

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

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

<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

Question 5

<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'
      }
    ]
  }

Question 6

はい、上記の@tomerで述べたようにできます。@tomerの回答にポイントを追加したいと思います。

まずrouter-outlet、ビューの2番目のルーティングビューをロードする場所に名前を指定する必要があります。（補助ルーティング角度2。）
angle2ルーティングでは、いくつかの重要なポイントがここにあります。
- pathまたはaux（URLとして表示する必要のあるパスを指定するには、これらの1つだけが必要です）。
- component、loader、redirectTo（ルーティング時にロードするコンポーネントのいずれか1つが必要です）
- nameまたはas（オプション）（routerLink時に指定する名前の1つだけが必要です）
- データ（オプション、受信側でrouterParamsを使用して取得する必要のあるルーティングで送信するものは何でも。）

詳細については、こことここをお読みください。

import {RouteConfig, AuxRoute} from 'angular2/router';
@RouteConfig([
  new AuxRoute({path: '/home', component: HomeCmp})
])
class MyApp {}

Question 7

1つのテンプレートでルーターアウトレットを再利用する別の（かなりハッキーな）方法があるようです。この回答は情報提供のみを目的としており、ここで使用されている手法はおそらく本番環境では使用しないでください。

https://stackblitz.com/edit/router-outlet-twice-with-events

router-outletはng-templateでラップされています。テンプレートは、ルーターのイベントをリッスンすることで更新されます。すべてのイベントで、テンプレートはスワップされ、空のプレースホルダーと再スワップされます。この「交換」がないと、テンプレートは更新されません。

ただし、2つのテンプレートの交換全体が少しハッキーに見えるため、これは最も明確に推奨されるアプローチではありません。

コントローラ内：

  ngOnInit() {
    this.router.events.subscribe((routerEvent: Event) => {
      console.log(routerEvent);
      this.myTemplateRef = this.trigger;
      setTimeout(() => {
        this.myTemplateRef = this.template;
      }, 0);
    });
  }

テンプレート内：

<div class="would-be-visible-on-mobile-only">
  This would be the mobile-layout with a router-outlet (inside a template): 
  <br>
  <ng-container *ngTemplateOutlet="myTemplateRef"></ng-container>
</div>

<hr>

<div class="would-be-visible-on-desktop-only">
  This would be the desktop-layout with a router-outlet (inside a template): 
  <br>
  <ng-container *ngTemplateOutlet="myTemplateRef"></ng-container>
</div>

<ng-template #template>
    <br>
    This is my counter: {{counter}}
    inside the template, the router-outlet should follow
    <router-outlet>
    </router-outlet>
</ng-template>

<ng-template #trigger>
  template to trigger changes...
</ng-template>

Question 8

ngIf条件付きの同じテンプレートで複数のルーターコンセントを使用することはできません。ただし、以下に示す方法で使用できます。

<div *ngIf="loading">
  <span>loading true</span>
  <ng-container *ngTemplateOutlet="template"></ng-container>
</div>

<div *ngIf="!loading">
  <span>loading false</span>
  <ng-container *ngTemplateOutlet="template"></ng-container>
  </div>

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