Angular2 nhiều bộ định tuyến-ổ cắm trong cùng một mẫu

Question 1

Có thể có nhiều bộ định tuyến-ổ cắm trong cùng một mẫu không?

Nếu có thì làm thế nào để cấu hình các tuyến đường?

Tôi đang sử dụng phiên bản beta angle2.

Question 2

có, bạn có thể, nhưng bạn cần sử dụng định tuyến aux. bạn sẽ cần đặt tên cho cửa hàng bộ định tuyến của mình:

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

và thiết lập cấu hình tuyến đường của bạn:

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

xem ví dụ này: http://plnkr.co/edit/JsZbuR?p=preview Cũng là video này: https://www.youtube.com/watch?v=z1NB-HG0ZH4&feature=youtu.be

Cập nhật cho các tuyến RC.5 Aux đã thay đổi một chút: trong ổ cắm bộ định tuyến của bạn, hãy sử dụng tên:

<router-outlet name="aux">

Trong cấu hình bộ định tuyến của bạn:

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

Question 3

Bạn có thể có nhiều cổng ra bộ định tuyến trong cùng một mẫu bằng cách định cấu hình bộ định tuyến và cung cấp tên cho bộ định tuyến của bạn, bạn có thể đạt được điều này như sau.

Lợi thế của cách tiếp cận dưới đây là bạn có thể tránh URL trông bẩn với nó. ví dụ: / home (aux: đăng nhập), v.v.

Giả sử khi tải, bạn đang khởi động 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>

Thêm sau vào bộ định tuyến của bạn.

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

Bây giờ khi / home được tải appComponent sẽ được tải với mẫu được phân bổ, sau đó bộ định tuyến góc cạnh sẽ kiểm tra tuyến đường và tải thành phần con trong cửa hàng bộ định tuyến được chỉ định trên cơ sở tên.

Giống như ở trên, bạn có thể cấu hình bộ định tuyến của mình để có nhiều bộ định tuyến-ổ cắm trên cùng một tuyến đường.

Question 4

Cú pháp của các tuyến Aux đã thay đổi với bộ định tuyến RC.3 mới.

Có một số vấn đề đã biết với các tuyến aux nhưng vẫn có hỗ trợ cơ bản.

Bạn có thể xác định các tuyến đường để hiển thị các thành phần trong một <router-outlet>

Định cấu hình

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

Ổ cắm bộ định tuyến được đặt tên

<router-outlet name="aux">

Điều hướng các tuyến đường aux

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

Có vẻ như điều hướng các tuyến aux từ bộ định tuyếnLink chưa được hỗ trợ

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

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

Chưa cố gắng bản thân mình

Xem thêm ~~bộ định tuyến Angular2 trong một thành phần~~

Bộ định tuyến RC.5 Liên kết DSL (giống như createUrlTreetham số) https://angular.io/docs/ts/latest/api/router/index/Router-class.html#!#createUrlTree-anchor

Question 5

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

Question 6

Có, bạn có thể như đã nói bởi @tomer ở trên. tôi muốn thêm một số điểm vào câu trả lời @tomer.

trước hết bạn cần cung cấp tên cho router-outletnơi bạn muốn tải chế độ xem định tuyến thứ hai trong chế độ xem của bạn. (định tuyến aux góc2.)
Trong định tuyến angle2 có một số điểm quan trọng ở đây.
- path hoặc aux (yêu cầu chính xác một trong số này để cung cấp đường dẫn bạn phải hiển thị dưới dạng url).
- component, loader, redirectTo (yêu cầu chính xác một trong số này, thành phần nào bạn muốn tải khi định tuyến)
- name hoặc as (tùy chọn) (yêu cầu chính xác một trong số này, tên chỉ định tại thời điểm routerLink)
- dữ liệu (tùy chọn, bất kỳ thứ gì bạn muốn gửi với định tuyến mà bạn phải nhận bằng routerParams ở đầu thu.)

để biết thêm thông tin đọc ở đây và ở đây.

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

Question 7

Có vẻ như có một cách khác (khá khó) để sử dụng lại bộ định tuyến trong một mẫu. Câu trả lời này chỉ dành cho mục đích thông tin và các kỹ thuật được sử dụng ở đây có thể không được sử dụng trong sản xuất.

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

Ổ cắm bộ định tuyến được bao bọc bởi một mẫu ng. Mẫu được cập nhật bằng cách lắng nghe các sự kiện của bộ định tuyến. Trong mọi sự kiện, mẫu được hoán đổi và hoán đổi lại bằng một trình giữ chỗ trống. Nếu không có "hoán đổi" này, mẫu sẽ không được cập nhật.

Tuy nhiên, rõ ràng nhất này không phải là cách tiếp cận được khuyến nghị, vì việc hoán đổi toàn bộ hai mẫu có vẻ hơi khó.

trong bộ điều khiển:

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

trong mẫu:

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

Question 8

Bạn không thể sử dụng nhiều cửa hàng bộ định tuyến trong cùng một mẫu với ngIfđiều kiện. Nhưng bạn có thể sử dụng nó theo cách dưới đây:

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