Umleiten zu einer anderen Komponente in @CanActivate in Angular2

Question

Gibt es eine Möglichkeit, dass wir auf eine andere Komponente von @CanActivate in Angular2 umleiten können?

Answer 1

Ja, Sie können! Dadurch wird verhindert, dass Ihre Komponente für nichts instanziiert wird.

zunächst eine neue Datei src/app-injector.ts

let appInjectorRef; 

export const appInjector:any = (injector = false) => { 
    if (!injector) { 
     return appInjectorRef; 
    } 

    appInjectorRef = injector; 

    return appInjectorRef; 
}; 

Dann wird aus den Referenz erhalten bootstrap

// ... 
import {appInjector} from './app-injector'; 
// ... 


bootstrap(App, [ 
    ROUTER_PROVIDERS 
]).then((appRef) => appInjector(appRef.injector)); 

schließlich in Ihrer Funktion

// ... 
import {appInjector} from './app-injector'; 
// ... 

@CanActivate((next, prev) => { 
    let injector = appInjector(); 
    let router = injector.get(Router); 

    if (42 != 4 + 2) { 
    router.navigate(['You', 'Shall', 'Not', 'Pass']); 
    return false; 
    } 

    return true; 
}) 

Et voilà!

Es wurde hier diskutiert https://github.com/angular/angular/issues/4112

Sie ein vollständiges Beispiel hier http://plnkr.co/edit/siMNH53PCuvUBRLk6suc?p=preview von @brandonroberts finden

Answer 2

Ab heute mit den neuesten @ Winkel/Router 3.0.0-rc.1, hier sind ein paar Referenzen auf, wie das durch CanActivate Wachen auf den Strecken zu tun:

1. angular 2 reference
2. Zwei Antworten auf diese Frage SO, von Nilz11 und von Jason

Der Haupt Kern der Logik wie folgt aussieht:

// ... 
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { 
    if (this.authService.isLoggedIn) { 
    // all ok, proceed navigation to routed component 
    return true; 
    } 
    else { 
    // start a new navigation to redirect to login page 
    this.router.navigate(['/login']); 
    // abort current navigation 
    return false; 
    } 
} 

Answer 3

Angular 2.0 Endlösung:

Ihre Wache kann kann, die als solche leicht nur eine injizierbare sein eigene Injektionen enthalten. So können wir einfach den Router einspeisen, um umzuleiten. Vergessen Sie nicht, den Dienst als Anbieter in Ihrem App-Modul hinzuzufügen.

Answer 4

Dies könnte jemand helfen, der versucht, auf etwas zu warten, bevor Sie fortfahren.

waitForBonusToLoad(): Observable<[boolean, string]> { 

const userClassBonusLoaded$ = this.store.select(fromRoot.getUserClasssBonusLoaded); 
const userClassSelected$ = this.store.select(fromRoot.getClassAttendancesSelectedId); 

return userClassBonusLoaded$.withLatestFrom(userClassSelected$) 
    .do(([val, val2]) => { 
    if (val === null && val2 !== null) { 
     this.store.dispatch(new userClassBonus.LoadAction(val2)); 
    } 
    }) 
    .filter(([val, val2]) => { 
    if(val === null && val2 === null) return true; 
    else return val; 
    }) 
    .map(val => { 
    return val; 
    }) 
    .take(1); 
} 

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> { 
return this.waitForBonusToLoad().map(([val, val2]) => 
    { 
    if(val === null && val2 === null){ 
     this.router.navigate(['/portal/user-bio']); 
     return false; 
    } 
    else { 
     return true; 
    } 
    } 
) 
}