Angular - 在使用命名插座時出現錯誤：「can not match any routes」can navigation from canActivate guard

Question

在我的應用程序中，導航到來自CanActivate後衛的登錄表單。

只用一個router-outlet就可以了。

但是，當嘗試使用named router-outlet在它顯示登錄組件我得到一個錯誤：

"Cannot match any routes. URL Segment: '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')}]);