Angular2 stwardnienie router wylot w tym samym szablonie

głosy
49

Czy to możliwe, aby mieć wiele Router-ujście w tym samym szablonie?

jeśli tak to w jaki sposób skonfigurować trasy?

Używam angular2 beta.

Dzięki.

Utwórz 06/01/2016 o 06:46
źródło użytkownik
W innych językach...                            


6 odpowiedzi

głosy
40

Tak można, ale trzeba użyć aux routingu. trzeba będzie nadać nazwę routera-wylot:

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

Twój config i konfiguracja trasy:

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

sprawdź 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 dla tras RC.5 Aux zmieniła trochę: w gniazda routera użyć nazwy:

<router-outlet name="aux">

W konfiguracji routera:

{path: '/auxRouter', component: secondComponentComponent, outlet: 'aux'}
Odpowiedział 06/01/2016 o 18:35
źródło użytkownik

głosy
3

Tak można jak powiedział @tomer powyżej. Chcę, aby dodać punkt do @tomer odpowiedź.

  • najpierw trzeba podać imię i nazwisko do router-outletktórego chcesz załadować drugi widok routingu w widoku. (AUX angular2 routingu).
  • W angular2 routingu kilku ważnych punktach są tutaj.

    • ścieżka lub AUX (wymaga dokładnie jednego z nich, aby dać drogę trzeba pokazać jak URL).
    • składnik, ładowarka, redirectTo (wymaga dokładnie jednego z nich, który składnik, który chcesz załadować na routing)
    • wymienić lub (opcjonalnie) (wymaga dokładnie jeden z nich, imię, które określić w momencie routerLink)
    • danych (opcjonalnie, co chcesz wysłać z routingiem, że trzeba uzyskać stosując routerParams na końcu odbiornika.)

aby uzyskać więcej informacji odczytane tutaj i tutaj.

import {RouteConfig, AuxRoute} from 'angular2/router';
@RouteConfig([
  new AuxRoute({path: '/home', component: HomeCmp})
])
class MyApp {}
Odpowiedział 07/01/2016 o 01:41
źródło użytkownik

głosy
15

Aux trasy składnia się nie zmieniło z nowym routerem RC.3.

Istnieje kilka znanych problemów z aux trasach, ale podstawowe wsparcie jest dostępne.

Można zdefiniować trasy pokazać składników w nazwie <router-outlet>

config trasa

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

Nazwany wylot routera

<router-outlet name="aux">

Nawigacja aux tras

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

Wydaje się, przechodząc aux trasy z routerLink nie jest jeszcze obsługiwany

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

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

Nie próbował się jeszcze

Zobacz także Angular2 routera w jednym składniku

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

Odpowiedział 29/06/2016 o 09:23
źródło użytkownik

głosy
25

Można mieć wiele Router-ujście w samym szablonie poprzez skonfigurowanie routera i zapewnienie nazwę routera-wylot,

Można to osiągnąć w następujący sposób.

Zaletą poniżej podejścia jest ów można uniknąć brudny URL z nim. np: / home (AUX: login) etc.

Zakładając, że na obciążenia jesteś bootstraping 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 do swojego 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, gdy / home jest ładowany appComponent dostanie obciążenia z przydzielonego szablonu, a następnie kątowe router sprawdzić trasę i załadować składnika dzieci w określonym gniazda routera na podstawie nazwy.

jak wyżej, można skonfigurować router, aby mieć wiele Router-ujście w tej samej trasie.

Odpowiedział 13/02/2017 o 10:30
źródło użytkownik

głosy
8

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

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

`

 {
    path: 'admin',
    component: AdminLayoutComponent,
    children:[
      {
        path: '',
        component: AdminStreamsComponent, 
        outlet:'list'
      },
      {
        path: 'stream/:id',
        component: AdminStreamComponent,
        outlet:'details'
      }
    ]
  }
Odpowiedział 07/09/2017 o 18:39
źródło użytkownik

głosy
0

Nie wydaje się być inny (bardziej hacky) sposobem na ponowne wykorzystanie Router-ujście w jednym szablonie:

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

Router wylotu jest owinięty przez ng matrycy. Szablon jest aktualizowany przez słuchanie wydarzeniach z routerem. Na każdym razie szablon jest zamienione i ponownie zamienione z pustym zastępczy. Bez tego „zamiana” szablonie nie zostaną zaktualizowane.

To nie wydaje się być zalecane podejście chociaż, ponieważ cała zamiana dwóch szablonów wydaje się nieco hacky.

Odpowiedział 27/03/2019 o 11:31
źródło użytkownik

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more