동일 템플릿 내의 Angular2 다중 라우터 출력

동일 템플릿 내의 Angular2 다중 라우터 출력

동일한 템플릿에 여러 개의 라우터 아웃렛을 가질 수 있습니까?

그렇다면 경로를 구성하는 방법은 무엇입니까?

angular2 beta를 사용하고 있습니다.

네 가능합니다. 하지만 aux routing을 사용해야 합니다.라우터의 이름을 지정해야 합니다.

<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:home) 등.

로드 시 appComponent를 부트스트래핑한다고 가정합니다.

app.component.component

<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를 로드하면 할당된 템플릿이 로드됩니다. 그러면 각 라우터가 경로를 확인하고 이름을 기준으로 지정된 라우터 출구에 자식 구성 요소를 로드합니다.

위와 같이 라우터가 동일한 경로에 여러 개의 라우터 아웃렛을 갖도록 구성할 수 있습니다.

새로운 RC.3 라우터로 Aux routes 구문이 변경되었습니다.

aux route와 관련하여 알려진 몇 가지 문제가 있지만 기본적인 지원이 가능합니다.

이름 있는 구성 요소를 표시하는 경로를 정의할 수 있습니다.<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 라우터링크 DSL(다음과 같음)createUrlTreeparameter) 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보기에서 두 번째 라우팅 보기를 로드할 위치입니다.(aux 라우팅 각도 2).

• angular2 라우팅에서는 중요한 점이 거의 없습니다.

  • path 또는 aux(이 중 정확히 하나를 선택하여 URL로 표시해야 하는 경로를 제공합니다.)
  • component, loader, redirectTo(라우팅 시 로드할 구성 요소)
  • name 또는 as (선택사항) (routerLink 시 지정하는 이름인 이 중 하나를 정확히 입력해야 함)
  • 데이터(선택 사항, 수신기 끝에 있는 routerParams를 사용하여 얻어야 하는 라우팅과 함께 전송하려는 모든 것).

자세한 내용은 여기와 여기를 읽어보세요.

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

를 여러 개 할 수 .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>

하나의 템플릿에서 라우터 아웃렛을 재사용하는 또 다른(다소 해킹) 방법이 있는 것 같습니다.이 답변은 정보를 제공하기 위한 목적으로만 제공되며, 여기서 사용되는 기법은 생산에 사용되어서는 안 될 것입니다.

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

라우터 콘센트는 ng-template로 감싸집니다.템플릿은 라우터의 이벤트를 청취하여 업데이트됩니다.모든 이벤트에서 템플릿이 스왑되고 빈 자리 표시자와 다시 스왑됩니다.이 "바꾸기"가 없으면 템플릿이 업데이트되지 않습니다.

그러나 두 템플릿의 전체 스왑이 약간 까다로워 보이기 때문에 이 방법은 권장되지 않습니다.

컨트롤러에서:

  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>

이것은 저에게 효과가 있었고 꽤 간단하고 간단했습니다.

<div *ngIf="authenticated">
  <ng-container *ngTemplateOutlet="template"></ng-container>
</div>

<div *ngIf="!authenticated">
  <ng-container *ngTemplateOutlet="template"></ng-container>
</div>

<ng-template #template>
  <router-outlet></router-outlet>
</ng-template>

언급URL : https://stackoverflow.com/questions/34628848/angular2-multiple-router-outlet-in-the-same-template