Angular2 несколько маршрутизаторов в одном шаблоне

Ответ 1

да, вы можете, но вам нужно использовать 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'}

Ответ 2

Вы можете иметь несколько маршрутизаторов-розеток в одном и том же шаблоне, настроив свой маршрутизатор и указав имя для своего маршрутизатора-розетки. Это можно сделать следующим образом.

Преимущество нижеследующего подхода заключается в том, что вы можете избежать грязно выглядящего URL с ним. например: /home (aux: логин) и т.д.

Предполагая, что при загрузке вы загружаете 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 маршрутизатор проверит маршрут и загрузит дочерний компонент в указанный выход маршрутизатора на основе имени.

Как и выше, вы можете настроить свой маршрутизатор на наличие нескольких маршрутизаторов-розеток на одном маршруте.

Ответ 3

Синтаксис Aux-маршрутов изменился с новым маршрутизатором 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>

Еще не пробовал

Смотрите также Angular2 роутер в одном компоненте

RC.5 routerLink DSL (аналогично параметру createUrlTree) https://angular.io/docs/ts/latest/api/router/index/Router-class.html#!#createUrlTree-anchor

Ответ 4

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

Ответ 5

Да, вы можете, как сказал @tomer выше. Я хочу добавить точку в ответ @tomer.

• сначала вам нужно указать имя router-outlet, где вы хотите загрузить второе представление маршрутизации в своем представлении. (aux routing angular2.)

• В маршрутизации angular2 здесь есть несколько важных моментов.

  • path или aux (требуется только одно из них, чтобы указать путь, который вы должны показать в качестве URL-адреса).
  • loader, redirectTo (требуется только один из них, какой компонент вы хотите загрузить при маршрутизации)
  • имя или как (необязательно) (требуется только одно из них, имя, которое указывается во время routerLink)
  • (необязательно, независимо от того, что вы хотите отправить с помощью маршрутизации, которую вы должны получить, используя routerParams в конце приемника.)

для более подробной информации читайте здесь и здесь.

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

Ответ 6

Кажется, есть другой (довольно хакерский) способ повторно использовать выход маршрутизатора в одном шаблоне:

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

Роутер-розетка обернута ng-шаблоном. Шаблон обновляется при прослушивании событий роутера. При каждом событии шаблон заменяется и заменяется пустым заполнителем. Без этой "замены" шаблон не будет обновлен.

Это, похоже, не рекомендуемый подход, так как обмен двумя шаблонами кажется немного неудачным.