Angular 角度不路由到嵌套路由器出口
我无法对以下涉及嵌套路由器出口的场景进行路由。其想法是在顶部有一个应用程序范围的横幅，然后是一个仪表板导航组件，它有自己的路由器出口来显示组件。这些组件应该能够有自己的路由器出口，以便（例如，显示主-细节模式，主在左侧，细节在右侧）。我可以路由单个命名出口，但不能路由另一个命名出口中的命名子出口Angular 角度不路由到嵌套路由器出口,angular,Angular,我无法对以下涉及嵌套路由器出口的场景进行路由。其想法是在顶部有一个应用程序范围的横幅，然后是一个仪表板导航组件，它有自己的路由器出口来显示组件。这些组件应该能够有自己的路由器出口，以便（例如，显示主-细节模式，主在左侧，细节在右侧）。我可以路由单个命名出口，但不能路由另一个命名出口中的命名子出口 AppComponent包含主出口，用于显示延迟加载模块中的仪表板NavComponent仪表板导航组件包含应显示主要组件的。我可以让它工作（即，路由到“app/dashboard/user/1”显示横
AppComponent仪表板NavComponentUserMasterComponentapp/dashboard/user/1/contact详细信息路由器出口中显示横幅、导航、UserMasterComponent
以及联系人
组件
这些是我的路由的简化版本，我尝试了多种路由配置。通过将它们分为单独的“user/:id/contact”和“user/:id/profile”路由，我已经能够使其正常工作，但这会导致仪表板NavComponent
和UserMasterComponent
在它们之间的每个路由更改上重新加载。我对Angular比较陌生，但如果它们是'user/:id'的子路由，我会假设它只刷新组件以获得最终激活的路由（即'contact'或'profile'）
应用程序路由.module.ts
const routes = {
path: 'app',
children: [
{
path: 'dashboard',
loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule)
}
]
}
const routes = {
{
path: 'user/:id',
component: DashboardNavComponent,
children: [
{
path: 'contact',
component: UserMasterComponent,
outlet: 'master',
children: [
{
path: '',
component: ContactComponent,
outlet: 'detail'
}
]
},
{
path: 'profile',
component: UserMasterComponent,
outlet: 'master',
children: [
{
path: '',
component: ProfileComponent,
outlet: 'detail'
}
]
}
]
}
};
const routes = {
{
path: '',
component: DashboardNavComponent, // Set component here to prevent re-load
children: [
{
path: 'user/:id',
children: [
{
path: 'contact',
component: UserMasterComponent,
children: [
{
path: '',
component: ContactComponent,
outlet: 'detail'
}
]
},
{
path: 'profile',
component: UserMasterComponent,
children: [
{
path: '',
component: ProfileComponent,
outlet: 'detail'
}
]
}
]
}
]
}
};
仪表板路由.module.ts
const routes = {
path: 'app',
children: [
{
path: 'dashboard',
loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule)
}
]
}
const routes = {
{
path: 'user/:id',
component: DashboardNavComponent,
children: [
{
path: 'contact',
component: UserMasterComponent,
outlet: 'master',
children: [
{
path: '',
component: ContactComponent,
outlet: 'detail'
}
]
},
{
path: 'profile',
component: UserMasterComponent,
outlet: 'master',
children: [
{
path: '',
component: ProfileComponent,
outlet: 'detail'
}
]
}
]
}
};
const routes = {
{
path: '',
component: DashboardNavComponent, // Set component here to prevent re-load
children: [
{
path: 'user/:id',
children: [
{
path: 'contact',
component: UserMasterComponent,
children: [
{
path: '',
component: ContactComponent,
outlet: 'detail'
}
]
},
{
path: 'profile',
component: UserMasterComponent,
children: [
{
path: '',
component: ProfileComponent,
outlet: 'detail'
}
]
}
]
}
]
}
};
在过去的几天里，我花了整整一个工作日在这个问题上，在发布到Stack Overflow的10分钟内解决了它：）希望这对某人有帮助，因为我没有发现任何问题清楚地记录了这个解决方案
我不知道每个功能都可能有一个未命名的主路由器出口，并认为我的整个应用程序只能有一个。解决方案是将仪表板功能的根路由器出口设置为主路由器出口，并只为一个路由器出口指定一个名称，即“详细信息”出口。然后，在路由配置中，我删除了所有的路由器出口插座的实例：“仪表板”
为了防止每次路线更改时重新加载仪表板导航组件
，我还必须将我的所有仪表板路线嵌套在一个全覆盖路线中
最终仪表板布线.module.ts
const routes = {
path: 'app',
children: [
{
path: 'dashboard',
loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule)
}
]
}
const routes = {
{
path: 'user/:id',
component: DashboardNavComponent,
children: [
{
path: 'contact',
component: UserMasterComponent,
outlet: 'master',
children: [
{
path: '',
component: ContactComponent,
outlet: 'detail'
}
]
},
{
path: 'profile',
component: UserMasterComponent,
outlet: 'master',
children: [
{
path: '',
component: ProfileComponent,
outlet: 'detail'
}
]
}
]
}
};
const routes = {
{
path: '',
component: DashboardNavComponent, // Set component here to prevent re-load
children: [
{
path: 'user/:id',
children: [
{
path: 'contact',
component: UserMasterComponent,
children: [
{
path: '',
component: ContactComponent,
outlet: 'detail'
}
]
},
{
path: 'profile',
component: UserMasterComponent,
children: [
{
path: '',
component: ProfileComponent,
outlet: 'detail'
}
]
}
]
}
]
}
};
在过去的几天里，我花了整整一个工作日在这个问题上，在发布到Stack Overflow的10分钟内解决了它：）希望这对某人有帮助，因为我没有发现任何问题清楚地记录了这个解决方案
我不知道每个功能都可以有一个未命名的主路由器出口，我认为我的整个应用程序只能有一个。解决方案是使仪表板的根路由器出口具有主路由器出口的功能，并且只为一个路由器出口指定一个名称，即“详细”名称。然后，在路由配置中，我删除了outlet:'dashboard'
的所有实例
为了防止每次路线更改时重新加载仪表板导航组件
，我还必须将我的所有仪表板路线嵌套在一个全覆盖路线中
最终仪表板布线.module.ts
const routes = {
path: 'app',
children: [
{
path: 'dashboard',
loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule)
}
]
}
const routes = {
{
path: 'user/:id',
component: DashboardNavComponent,
children: [
{
path: 'contact',
component: UserMasterComponent,
outlet: 'master',
children: [
{
path: '',
component: ContactComponent,
outlet: 'detail'
}
]
},
{
path: 'profile',
component: UserMasterComponent,
outlet: 'master',
children: [
{
path: '',
component: ProfileComponent,
outlet: 'detail'
}
]
}
]
}
};
const routes = {
{
path: '',
component: DashboardNavComponent, // Set component here to prevent re-load
children: [
{
path: 'user/:id',
children: [
{
path: 'contact',
component: UserMasterComponent,
children: [
{
path: '',
component: ContactComponent,
outlet: 'detail'
}
]
},
{
path: 'profile',
component: UserMasterComponent,
children: [
{
path: '',
component: ProfileComponent,
outlet: 'detail'
}
]
}
]
}
]
}
};
你知道为什么命名两个路由器出口都会导致问题吗？我不确定，但我假设路由器假设每个功能都应该有一个主路由器。它工作得很好，直到我的嵌套变得太深。功能你是说一只眼睛，我是说功能模块。我的仪表板模块是延迟加载的（我的实际代码使用canLoad guard检查用户是否经过身份验证）。你知道为什么命名两个路由器出口都会导致问题吗？我不确定，但我假设路由器假设每个功能都应该有一个主路由器。它工作得很好，直到我的嵌套变得太深。功能你是说一只眼睛，我是说功能模块。我的仪表板模块是延迟加载的（我的实际代码使用canLoad guard检查用户是否经过身份验证）。