Wielokrotne gniazdo routera Angular2 w tym samym szablonie


83

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

Jeśli tak, to jak skonfigurować trasy?

Używam angular2 beta.


Co dokładnie chcesz wdrożyć? Czy podtrasy mogą odpowiadać Twoim potrzebom? Zobacz ten link: angular.io/docs/ts/latest/guide/router.html#!#child-router .
Thierry Templier,

Muszę zbudować aplikację, która korzysta z wielu sesji (kart), każda sesja ma tę samą zawartość (podobnie jak karty przeglądarki).
Islam Shaheen

sprawdź rozmowę od programisty routera, aby zobaczyć, co jest aktualnie możliwe -> youtube.com/watch?v=z1NB-HG0ZH4 JEŚLI dobrze pamiętam, są trasy podrzędne i pomocnicze.
Angular University

Odpowiedzi:


57

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


dzięki za odpowiedź, używam angular2 beta. Próbowałem zdefiniować trasę aux: {aux: '/ edit-entity /: id', name: 'EditEntity', component: EditEntityComponent}, kiedy to nie działa: this._router.navigate (['/' , ['EditEntity'], {id: id}]);
Islam Shaheen

upewnij się, że w sekcji nawigacji uwzględniasz całą trasę, a nie w odniesieniu do komponentu.
Tomer Almog

4
Aktualizacja: od maja 2016 r. Angular2 właśnie wydał RC (kandydata do wydania), a teraz trasy Aux mają działać.
Tomer Almog

3
1 głos na odpowiedź na aktualizację RC5. Angular2 zmienia się tak szybko.
teddy

47

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.


Próbowałem twojego podejścia, ale to nie działa.
Filip Witkowski,

19

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


Czy to ma działać w RC5? Nie udało mi się uruchomić tego. Patrząc na kod źródłowy routera, również nie mogę znaleźć żadnej nazwy „@Input ()”.
Kungen

@Input()nazwa jest własnością RouterOutletklasy. Muszę sprawdzić składnię ścieżki aux dla routerLink.
Günter Zöchbauer

Obecna składnia wydaje się być następująca<a [routerLink]="['/team/3', {outlets: {aux: 'chat'}}]">c</a>
Günter Zöchbauer

Proszę, spójrz na to pytanie i zobacz, czy zdołasz mi pomóc. stackoverflow.com/questions/39142396/…
Kungen

@ GünterZöchbauer Po spojrzeniu na odpowiedź - chyba czegoś mi brakuje - czy można usunąć trasy AUX po odwiedzeniu ich przez routerLink? (nie za pomocą kodu). Próbowałem twojej odpowiedzi w tym prostym pliku plnkr bez powodzenia. Trasa aux po prostu się nie zmieni
Royi Namir

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

3

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

3
Oba linki są uszkodzone.
ceebreenk

0

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>

0

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>
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.