Wielokrotne gniazdo routera Angular2 w tym samym szablonie

Czy można mieć wiele gniazdek routera w tym samym szablonie?

Jeśli tak, to jak skonfigurować trasy?

Używam angular2 beta.

tak, możesz, ale musisz użyć routingu aux. będziesz musiał nadać nazwę gniazdu routera:

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

i skonfiguruj konfigurację trasy:

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

zobacz ten przykład: http://plnkr.co/edit/JsZbuR?p=preview Również ten film: https://www.youtube.com/watch?v=z1NB-HG0ZH4&feature=youtu.be

Aktualizacja tras RC.5 Aux nieco się zmieniła: w gniazdku routera użyj nazwy:

<router-outlet name="aux">

W konfiguracji routera:

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

Możesz mieć wiele gniazdek routera w tym samym szablonie, konfigurując router i podając nazwę gniazdka routera, możesz to osiągnąć w następujący sposób.

Zaletą poniższego podejścia jest to, że dzięki niemu można uniknąć nieprzyjemnie wyglądającego adresu URL. np .: / home (aux: login) itp.

Zakładając, że podczas ładowania ładujesz 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>

Dodaj następujące do routera.

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

Teraz po załadowaniu / home appComponent otrzyma ładunek z przydzielonym szablonem, wtedy router kątowy sprawdzi trasę i załaduje komponent potomny do określonego gniazda routera na podstawie nazwy.

Podobnie jak powyżej, możesz skonfigurować router tak, aby miał wiele gniazd routera na tej samej trasie.

Składnia tras pomocniczych zmieniła się wraz z nowym routerem RC.3.

Istnieją pewne znane problemy z trasami aux, ale dostępna jest podstawowa obsługa.

Możesz zdefiniować trasy, aby pokazać komponenty w nazwanym <router-outlet>

Konfiguracja trasy

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

Nazwane gniazdo routera

<router-outlet name="aux">

Poruszaj się po trasach aux

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

Wygląda na to, że nawigacja po trasach aux z routerLink nie jest jeszcze obsługiwana

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

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

Jeszcze nie próbowałem

Zobacz także router Angular2 w jednym komponencie

RC.5 routerLink DSL (to samo co createUrlTreeparametr) https://angular.io/docs/ts/latest/api/router/index/Router-class.html#!#createUrlTree-anchor

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

Tak, możesz, jak powiedział @tomer powyżej. chcę dodać punkt do odpowiedzi @tomer.

• najpierw musisz podać nazwę miejsca, w router-outletktórym chcesz załadować drugi widok trasowania w swoim widoku. (aux routing angular2.)

• W routingu angular2 znajduje się kilka ważnych punktów.

  • path lub aux (wymaga dokładnie jednego z nich, aby podać ścieżkę, którą musisz wyświetlić jako adres URL).
  • component, loader, redirectTo (wymaga dokładnie jednego z nich, który komponent chcesz załadować w routingu)
  • name lub as (opcjonalnie) (wymaga dokładnie jednego z nich, nazwy określonej w momencie routerLink)
  • dane (opcjonalnie, cokolwiek chcesz wysłać z routingiem, które musisz uzyskać za pomocą routerParams na końcu odbiornika).

aby uzyskać więcej informacji, przeczytaj tutaj i tutaj.

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

Wydaje się, że istnieje inny (raczej hackerski) sposób ponownego wykorzystania gniazda routera w jednym szablonie. Ta odpowiedź jest przeznaczona wyłącznie do celów informacyjnych, a zastosowane tutaj techniki prawdopodobnie nie powinny być używane w produkcji.

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

Wylot routera jest owinięty szablonem ng. Szablon jest aktualizowany poprzez nasłuchiwanie zdarzeń routera. Przy każdym zdarzeniu szablon jest zamieniany i ponownie zamieniany z pustym symbolem zastępczym. Bez tej „zamiany” szablon nie byłby aktualizowany.

Zdecydowanie nie jest to jednak zalecane podejście, ponieważ cała zamiana dwóch szablonów wydaje się nieco hakerska.

w kontrolerze:

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

w szablonie:

<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>

Nie można używać wielu gniazd routera w tym samym szablonie z ngIfwarunkiem. Ale możesz go użyć w sposób pokazany poniżej:

<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>