路由到辅助路由不适用于 router.navigate

Question

在我的 angular 8 应用程序中，当主页首次加载时，它会将(sidebar:homesidebar)辅助路由附加到 url 并很好地加载主页边栏。在主页边栏上，有一个登录按钮，单击它时会导航到登录页面。登录页面的 url 按预期包含主页边栏，并在侧面显示主页边栏，但在用户登录后，侧边栏不会更改为用户的仪表板特定侧边栏，并且主边栏仍然可见，(sidebar: homesidebar)显示网址栏。

我遇到的第二个问题是我的代码被设置成如果用户尝试访问用户特定的仪表板而不先登录，就像他们只是在 url 栏中输入用户仪表板组件的 url 一样，那么他们将被带到登录页面，它会在侧面显示主页边栏， 但它没有显示它，甚至没有显示主边栏。根本没有显示侧边栏，url定位栏没有指定的辅助路由(它只显示：localhost:4200/login(。

如果用户从此格式错误的页面登录，则会将其重定向到各自的仪表板页面，但根本不显示其各自的侧边栏。实际上，根本没有显示侧边栏，也没有在url栏中显示。通过调试应用程序，我已经确认所有变量都在使用 router.navigate 函数重定向的代码中生成。如何解决这些问题？谢谢。

更新：

登录后，当我在chrome浏览器中手动重新加载页面时，我可以看到右侧边栏。

路线：

const routes: Routes = [
{ path: 'register', component: RegisterComponent },
{ path: 'login', component: LoginComponent },
{ path: 'manager', component: ManagerInterfaceComponent, canActivate: [ManagerGuard] },
{ path: 'employee', component: EmployeeInterfaceComponent, canActivate: [EmployeeGuard],
children: [
{path: '', redirectTo: '/employee(sidebar:employeesidebar)', pathMatch: 'full'},
{path: 'schedule', component: EmployeeScheduleComponent },
]
},
{ path: 'vendor', component: VendorInterfaceComponent, canActivate: [VendorGuard] },
{ path: 'aboutus', component: AboutUsComponent },
{ path: 'mission', component: MissionStatementComponent },
{ path: 'contactus', component: ContactUsComponent },
{ path: '', redirectTo: '/home(sidebar:homesidebar)', pathMatch: 'full'},
{ path: 'homesidebar', component: HomeSidebarComponent, outlet: 'sidebar' },
{ path: 'employeesidebar', component: EmployeeSidebarComponent, outlet: 'sidebar' },
{ path: 'home', component: HomeComponent },
{ path: '**', component: PageNotFoundComponent}
];

员工卫士：

canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
this.user = this.authService.getUser();
let role = this.user && this.user.role[0] || null;
if(role === "employee" && this.authService.isAuthenticated()){
return true;
}
this.router.navigate(['login', { outlets: {"sidebar": ["homesidebar"]}}]);
return false;
}

登录组件：

login() {
if (this.loginForm.invalid) {
return;
}
this.authService.login(
{
username: this.f.username.value,
password: this.f.password.value
}
).pipe(
catchError(
error => {this.badCredentials = true;
console.log(error); 
return error;} )
)
.subscribe(
res => {
let role = res.role[0];
let sideBarPath = this.processRole(role);
this.router.navigate([`${role}`, {outlets: {'sidebar': [sideBarPath]}}]);
}
);
}

Answer 1

对于登录页面无法从 Guard 中的重定向加载主页边栏的问题，我只是使用router.navigateByUrl路由器功能而不是router.navigate加载了 url

：router.navigateByUrl('/login(sidebar:homesidebar)')

至于登录后右侧仪表板侧边栏未显示的问题，我不得不将登录组件中的导航功能更改为：

this.router.navigate(/${role}, {outlets: {sidebar: null}}], { replaceUrl: true});

null值将删除主侧边栏，以便可以在'employee'的路由路径中指定的路由中加载 Employeesidebar ：

{ path: 'employee', component: EmployeeInterfaceComponent, canActivate: [EmployeeGuard],
children: [
{path: '', redirectTo: '/employee(sidebar:employeesidebar)', pathMatch: 'full'},
{path: 'schedule', component: EmployeeScheduleComponent },
]