Angular - 使用命名插座时出错：＆＃34;无法匹配任何路由＆＃34;从canActivate后卫导航

Question

在我的应用中，我导航到CanActivate后卫的登录表单。

只使用一个router-outlet时它就没问题了。

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

  

＆＃34;无法匹配任何路线。网址细分：＆＃39;登录＆＃39;＆＃34;。

如何解决？

以下是我的应用中的相关代码：

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')}]);