web-dev-qa-db-ja.com

同じテンプレート内のAngular2の複数のルーターコンセント

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

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

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

angularangular2-routingangular2-template
68
Islam Shaheen

はい、できますが、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'}
48
Tomer Almog

ルーターを設定し、ルーターアウトレットに名前を付けることで、同じテンプレートに複数のルーターアウトレットを作成できます。

これは次のようにして達成できます。

以下のアプローチの利点は、汚い見た目の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は割り当てられたテンプレートを使用してロードを取得し、角度ルーターはルートをチェックし、名前に基づいて指定されたルーターアウトレットの子コンポーネントをロードします。

上記のように、同じルートに複数のルーターアウトレットがあるようにルーターを構成できます。

35
jigar gala

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

18
Günter Zöchbauer

<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'
      }
    ]
  }
13
Tomiwa Adefokun

はい、上記の@tomerが言ったようにできます。 @tomerの回答にポイントを追加したいです。

  • まず、ビューの2番目のルーティングビューをロードするrouter-outletに名前を付ける必要があります。 （aux routing angular2）

  • Angle2ルーティングでは、重要なポイントはほとんどありません。

    • pathまたはaux（URLとして表示する必要があるパスを指定するには、これらの1つが正確に必要です）。
    • コンポーネント、ローダー、redirectTo（これらのいずれか、ルーティング時にロードするコンポーネントが正確に1つ必要です）
    • nameまたはas（オプション）（これらの正確に1つが必要です。routerLink時に指定する名前）
    • データ（オプション、受信側でrouterParamsを使用して取得する必要があるルーティングで送信するものは何でも）

詳細については here および here。 を参照してください

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

1つのテンプレートでルーターアウトレットを再利用する別の（ややハッキングな）方法があるようです。

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

ルーターアウトレットはngテンプレートでラップされます。テンプレートは、ルーターのイベントをリッスンすることにより更新されます。すべてのイベントで、テンプレートは空のプレースホルダーと交換および再交換されます。この「スワップ」なしでは、テンプレートは更新されません。

ただし、2つのテンプレートのスワッピング全体が少しハックのように見えるため、これは推奨されるアプローチではないようです。

0
Tobias Gassmann