Angular - 使用命名插座时出现错误：从 canActivate 防护导航时“无法匹配任何路由”

Question

在我的应用程序中，我从 CanActivate 守卫导航到登录表单。

只使用一个router-outlet 就可以了。

但是当尝试使用named router-outlet 在其中显示登录组件时出现错误：

“无法匹配任何路由。URL 段：'login'”。

如何解决？

这是我的应用程序中的相关代码：

app.component.html：

<router-outlet></router-outlet>
<router-outlet name="popup"></router-outlet>

app-routing.module.ts ：

const routes: Routes = [
  { path: 'login', component: LoginComponent, outlet: 'popup', },

  { path: '', component: MainComponent,
    canActivate : [AuthGuardService],
  },
];

auth-guard.service.ts：

@Injectable()
export class AuthGuardService implements CanActivate {
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    return this.loginService
               .isAuthorised()
               .map(res => {
                  ...
                }).catch((err) => {
                  this.router.navigate(['/login']);
                });
  }
}

Answer 1

你需要这个：

this.router.navigate(['/', {outlets: {popup:'login')}]);