Angular2 багаторазовий маршрутизатор-розетка в одному шаблоні

Чи можна мати один і той же шаблон маршрутизатора?

Якщо так, то як налаштувати маршрути?

Я використовую angular2 beta.

так ви можете, але вам потрібно використовувати допоміжну маршрутизацію. Вам потрібно буде вказати ім’я вашої розетки:

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

Ви можете мати декілька розеток-маршрутизаторів в одному шаблоні, налаштувавши свій маршрутизатор і вказавши ім’я розетки-маршрутизатора, ви можете досягти цього наступним чином.

Перевага нижченаведеного підходу полягає в тому, що ви можете уникнути брудної 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

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

Так, ви можете, як сказав @tomer вище. я хочу додати якийсь момент до відповіді @tomer.

• по-перше, вам потрібно вказати ім'я, router-outletкуди ви хочете завантажити другий вигляд маршрутизації у своєму поданні. (допоміжна маршрутизація кутова2.)

• У маршрутизації angular2 тут є кілька важливих моментів.

  • path або aux (потрібен саме один із них, щоб вказати шлях, який потрібно показати як URL-адресу).
  • component, loader, redirectTo (потрібен саме один із них, який компонент ви хочете завантажити при маршрутизації)
  • name або як (необов’язково) (потрібне саме одне з них, ім’я, яке вказується під час 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>