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

да, можно, но нужно использовать маршрутизацию aux. вам нужно будет дать название роутеру-розетке:

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

и настройте конфигурацию вашего маршрута:

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

Посмотрите этот пример, а также этот видео.

Обновление для маршрутов RC.5 Aux немного изменилось: в розетке роутера используйте имя:

<router-outlet name="aux">

В конфигурации вашего роутера:

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

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

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

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

Синтаксис 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

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

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

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

  • path or aux (requires exactly one of these to give the path you have to show as the url).
  • component, loader, redirectTo (требуется ровно один из них, какой компонент вы хотите загрузить при маршрутизации)
  • name или as (необязательно) (требуется ровно одно из них, имя, которое указывается во время routerLink)
  • данные (необязательно, все, что вы хотите отправить с маршрутизацией, которую вы должны получить с помощью routerParams на стороне получателя).

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

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

Кажется, есть еще один (довольно хакерский) способ повторно использовать роутер-розетку в одном шаблоне. Этот ответ предназначен только для информационных целей, и используемые здесь методы, вероятно, не должны использоваться в производстве.

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

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

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

в контроллере:

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

в шаблоне:

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

Вы не можете использовать несколько выходов маршрутизатора в одном шаблоне с условием ngIf. Но вы можете использовать его так, как показано ниже:

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