나는 새로운 angular2. 내가 노력하고 사용하는 방법을 이해하는 여러<라우터 출구>
에서 특정 템플릿입니다. 내가 사라지만 많은 QA 여기에 있지만 할 수't 를 해결하 제 오류가 있습니다.
라우터입니다.모듈입니다.ts
const routes: Routes = [
{
path: '',
redirectTo: 'one',
pathMatch: 'full'
},
{
path: 'two',
component: ClassTwo, children: [
{
path: 'three',
component: ClassThree,
outlet: 'nameThree',
},
{
path: 'four',
component: ClassFour,
outlet: 'nameFour'
}
]
},];
component1.html
<h3>In One</h3>
<nav>
<a routerLink="/two" class="dash-item">...Go to Two...</a>
<a routerLink="/three" class="dash-item">... Go to THREE...</a>
<a routerLink="/four" class="dash-item">...Go to FOUR...</a>
</nav>
<router-outlet></router-outlet> // Successfully loaded component2.html
<router-outlet name="nameThree" ></router-outlet> // Error: Cannot match any routes. URL Segment: 'three'
<router-outlet name="nameFour" ></router-outlet> // Error: Cannot match any routes. URL Segment: 'three'
component2.html
<h3>In two</h3>
component3.html
<h3>In three</h3>
component4.html
<h3>In four</h3>
클릭할 때*로 이동하다.에서 두가 인쇄됩니다. 하지만 클릭하면 다른 두 가지의 링크 나에게 오류할 수 없는 경기는 어떤 노선*
해결 myself. 일부 작은 구조적 변화도. 에서부터*Component1 을Component2에 의해 수행되는 하나의<라우터 출구>
. Component2 을Comonent3andComponent4*가에 의해 수행 여러<라우터-아울렛 name="xxxxx">
결과의 내용은 다음과 같습니다:
Component1.html
<nav>
<a routerLink="/two" class="dash-item">Go to 2</a>
</nav>
<router-outlet></router-outlet>
Component2.html
<a [routerLink]="['/two', {outlets: {'nameThree': ['three']}}]">In Two...Go to 3 ... </a>
<a [routerLink]="['/two', {outlets: {'nameFour': ['four']}}]"> In Two...Go to 4 ...</a>
<router-outlet name="nameThree"></router-outlet>
<router-outlet name="nameFour"></router-outlet>
의'/두'
나타내는 상위 요소['세']
와['네']
나타냅 링크 각각의 아이들의 component2
<라우터-아울렛 name="nameThree"></라우터 출구>
<라우터-아울렛 name="nameFour"></라우터 출구>
. Component3.html 고 Component4.html 에서와 동일합니다 질문입니다.
라우터입니다.모듈입니다.ts
const routes: Routes = [
{
path: '',
redirectTo: 'one',
pathMatch: 'full'
},
{
path: 'two',
component: ClassTwo, children: [
{
path: 'three',
component: ClassThree,
outlet: 'nameThree'
},
{
path: 'four',
component: ClassFour,
outlet: 'nameFour'
}
]
},];
를 수정하십시오라우터입니다.모듈입니다.ts로:
const routes: Routes = [
{
path: '',
redirectTo: 'one',
pathMatch: 'full'
},
{
path: 'two',
component: ClassTwo, children: [
{
path: 'three',
component: ClassThree,
outlet: 'nameThree',
},
{
path: 'four',
component: ClassFour,
outlet: 'nameFour'
},
{
path: '',
redirectTo: 'two',
pathMatch: 'full'
}
]
},];
과에서 당신의component1.html
<h3>In One</h3>
<nav>
<a routerLink="/two" class="dash-item">...Go to Two...</a>
<a routerLink="/two/three" class="dash-item">... Go to THREE...</a>
<a routerLink="/two/four" class="dash-item">...Go to FOUR...</a>
</nav>
<router-outlet></router-outlet> // Successfully loaded component2.html
<router-outlet name="nameThree" ></router-outlet> // Error: Cannot match any routes. URL Segment: 'three'
<router-outlet name="nameFour" ></router-outlet> // Error: Cannot match any routes. URL Segment: 'three'