경로 내에서 경로를 올바르게 수행하는 방법을 찾는 데 문제가 있습니다. 내가 이루고 싶은 것 :
App
-Contacts (view)
-News (view)
SidebarNavigation (persistent throught news)
-InfoOne (child-view of news)
-InfoTwo (child-view of news)
news.component.html
<div class="sidebar-navigation>
<a routerLink="/news/info-one" routerLinkActive="active">Info one</a>
<a routerLink="/news/info-two" routerLinkActive="active">Info two</a>
</div>
<router-outlet></router-outlet>
이제 내가 직면하는 문제는 내가 클릭 할 때마다 info-one/ info-two사이드 바 탐색이 사라진다는 것입니다. <router-outlet></router-outlet>메인이 아닌 아이 내에서 차일드 뷰를 표시하도록 angular에게 어떻게 말 <router-outlet></router-outlet>합니까?
공식 튜토리얼 에서 포크 플 런커를 만들었 습니다. 보고에서 보자 app/news.component.ts하고app/app.routing.ts
더 많은 코드 :
app.routing.ts:
import { Routes, RouterModule } from '@angular/router';
import { ContactComponent } from './contact.component';
import { NewsComponent, InfoOneComponent, InfoTwoComponent } from './news.component';
const appRoutes: Routes = [
{
path: '',
redirectTo: '/news',
pathMatch: 'full'
},
{
path: 'contact',
component: ContactComponent
},
{
path: 'news',
component: NewsComponent
},
{
path: 'news/info-one',
component: InfoOneComponent
},
{
path: 'news/info-two',
component: InfoTwoComponent
}
];
export const routing = RouterModule.forRoot(appRoutes);
감사
에 문제가 있습니다. Routes아래와 같이 업데이트하십시오.
자식 경로를 정의했으며 자식 배열 내부로 이동해야합니다. 자식을 추가하지 않으면 router-outlet뉴스 구성 요소 내부에 추가 한 것이 아니라 메인에로드됩니다 .
const appRoutes: Routes = [
{
path: '',
redirectTo: '/news/info-one',
pathMatch: 'full'
},
{
path: 'contact',
component: ContactComponent
},
{
path: 'news',
component: NewsComponent,
children : [
{
path: '',
redirectTo: '/news/info-one',
pathMatch: 'full'
},
{
path: 'info-one',
component: InfoOneComponent
},
{
path: 'info-two',
component: InfoTwoComponent
}
]
}];
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다