该问题通常源于命名出口路由的配置错误。要解决该问题,需要在路由模块中确保正确设置命名出口并在导航链接中使用正确的名称。
以下是一个示例,展示如何正确使用命名出口:
路由模块中的配置:
const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{
path: 'contacts',
component: ContactsComponent,
children: [
{ path: '', redirectTo: 'list', pathMatch: 'full' },
{ path: 'list', component: ContactsListComponent, outlet: 'contacts' },
{ path: 'details/:id', component: ContactDetailsComponent, outlet: 'contacts' }
]
}
];
组件中的导航链接:
Contacts
在上述示例中,我们设置了一个名为“contacts”的命名出口,并在导航链接中使用了正确的名称。这样,Angular就能正确匹配与命名出口对应的路由。