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

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

---

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

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

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 (same as createUrlTree parameter) 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'
      }
    ]
  }

---

Yes you can as said by @tomer above. i want to add some point to @tomer answer.

• firstly you need to provide name to the router-outlet where you want to load the second routing view in your view. (aux routing angular2.)

• In angular2 routing few important points are here.

  • path or aux (requires exactly one of these to give the path you have to show as the url).
  • component, loader, redirectTo (requires exactly one of these, which component you want to load on routing)
  • name or as (optional) (requires exactly one of these, the name which specify at the time of routerLink)
  • data (optional, whatever you want to send with the routing that you have to get using routerParams at the receiver end.)

for more info read out here and here.

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

---

There seems to be another (rather hacky) way to reuse the router-outlet in one template:

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

The router-outlet is wrapped by an ng-template. The template is updated by listening to events of the router. On every event the template is swapped and re-swapped with an empty placeholder. Without this "swapping" the template would not be updated.

This does not seem to be a recommended approach though, since the whole swapping of two templates seems a bit hacky.

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