我們正在將 AngularJS 1.8 應用程式遷移到 Angular 13，我無法找到有關如何使用 Angular 路由創建三個不同視圖的任何提示。意見是：
- 主要的
- 監控
- 入職
每個視圖都有一個獨特的布局，其中資訊顯示在一個router-outlet. app-component.html只是包含<router-outlet></router-outlet>，我想將每個視圖放在這個插座內。
我定義了以下路線：
const routes = [
{ path: '',
pathMatch: 'full',
component: MainComponent,
children: [
{ path: 'mainsub', component: MainSubComponent }
]
},
{ path: 'onboarding',
pathMatch: 'full',
component: OnboardingComponent,
children: [
{ path: 'onboardingsub', component: OnboardingSubComponent }
]
},
{ path: 'monitor',
pathMatch: 'full',
component: MonitorComponent,
children: [
{ path: 'monitorsub', component: MonitorSubComponent }
]
}
];
在MainComponent我想導航到第一個孩子：
constructor(private router:Router, private route:activatedRoute) {};
ngOnInit() {
this.router.navigate(['mainsub'], {relativeTo:this.route});
}
但是，由于路線mainsub未知，因此失敗。
我在這里想念什么？
uj5u.com熱心網友回復：
嘗試使用 firstChild：
constructor(route: ActivatedRoute) {
route.url.subscribe(() => {
console.log(route.snapshot.firstChild.data);
});
}
uj5u.com熱心網友回復：
顯然我錯過了很多；）
在網上進行更多搜索后，我發現了這篇關于pathMatch. 簡而言之，我需要使用以下路線（用于主視圖）：
const routes = [
{
path: '', pathMatch: 'prefix', component: MainComponent,
children: [
{ path: '', pathMatch: 'full', redirectTo: 'mainsub' },
{ path: 'mainsub', component: MainSubComponent }
]
};
這也消除了在MainComponent.
uj5u.com熱心網友回復：
如果您希望監控和入職組件成為主要組件的子組件（從您的問題中出現），您可能必須這樣做：
const appRoutes: Routes = [
{ path: '', redirectTo: 'main', pathMatch: 'full'},
{ path: 'main', component: MainComponent, children: [
{path:'monitoring', component: MonitoringComponent, outlet: 'c'},
{path:'onboard', component: OnBoardComponent, outlet: 'c'},
] },
];
那么你的路由器插座看起來像這樣：
<router-outlet name="c"></router-outlet>
最后鏈接應該是：
<a [routerLink]="['/main', { outlets: { c: ['monitoring'] } }]">
Monitoring
</a>
<a [routerLink]="['/main', { outlets: { c: ['onboard'] } }]">
Onboard
</a>
讓我知道它是否有效。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/431288.html
上一篇：為什么切換復選框回傳false？