[angular] 동일한 템플릿의 Angular2 다중 라우터 콘센트

Program / 글쓴이

동일한 템플릿에 여러 라우터 콘센트를 사용할 수 있습니까?

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

angular2 베타를 사용하고 있습니다.

답변

예, 가능하지만 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'}

답변

라우터를 구성하고 라우터 콘센트에 이름을 제공하여 동일한 템플릿에 여러 라우터 콘센트를 가질 수 있습니다. 다음과 같이이 작업을 수행 할 수 있습니다.

아래 접근 방식의 장점은 더러워 보이는 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가 할당 된 템플릿으로로드되고 앵귤러 라우터는 경로를 확인하고 이름을 기준으로 지정된 라우터 콘센트에 자식 구성 요소를로드합니다.

위와 같이 동일한 경로에 여러 개의 라우터 콘센트를 갖도록 라우터를 구성 할 수 있습니다.

답변

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

aux 경로에 대해 몇 가지 알려진 문제가 있지만 기본 지원을 사용할 수 있습니다.

경로를 정의하여 이름이 지정된 <router-outlet>

경로 구성

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

명명 된 라우터 콘센트

<router-outlet name="aux">

AUX 경로 탐색

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

routerLink에서 aux 경로 탐색이 아직 지원되지 않는 것 같습니다. 

<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 라우팅에는 몇 가지 중요한 점이 있습니다.

    • 경로 또는 aux (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>