Ich habe ein Problem beim Rendern einer Vorlage nach dem Aufruf von router.navigate in einem Callback für auth0lock

loginComponent.ts

import {Component, Inject} from 'angular2/core';
import {Router, ComponentInstruction} from 'angular2/router';

import {Auth} from '../auth';

declare var Auth0Lock;

@Component({
    selector: 'login',
    templateUrl: '/tpls/login/login.html'
})

export class LoginComponent {

    private lock = new Auth0Lock('xxx', 'xxx.auth0.com');

    constructor(@Inject(Router) private router: Router, @Inject(Auth) private auth: Auth) { }

    logError = (err) => {
        console.log(err);
    }

    loginSuccess = (data) => {
        if(this.router.parent.lastNavigationAttempt !== undefined && this.router.parent.lastNavigationAttempt !== '/Login') {
            this.router.navigateByUrl(this.router.parent.lastNavigationAttempt);
        } else if(data.user.req_update) {
            this.router.navigate(['Profile']);
        } else {
            this.router.navigate(['Home']);
        }
    }

    ngOnInit() {

        this.lock.show((err: Error, profile: any, id_token: string) => {
            if(err) return this.logError(err);
            return this.auth.login(profile, id_token);
        }); 

        this.auth.loginSuccess.subscribe(
            data => this.loginSuccess(data),
            err => this.logError(err)
        );

    }
}

auth.ts

import {Injectable, Inject, EventEmitter, Output } from 'angular2/core';
import {Http, Headers} from 'angular2/http';

@Injectable()

export class Auth {
    ...
    @Output() loginSuccess = new EventEmitter();

    login = (profile, id_token) => {
        ...

        this.addUser(profile).subscribe(
            data => {
                this.loginSuccess.next(data.json());
            },
            err => {
                console.log(err); 
                this.loginSuccess.error(err.json());
            }
        );
    }
    addUser = (user: any) => {
        let body = JSON.stringify(user);
        return this.http.post('/api/user/add', body, { headers: this.headers});
    }
}

homeComponent.ts

import {Component, Inject, OnInit} from 'angular2/core';
import {Http} from 'angular2/http';
import {ROUTER_DIRECTIVES} from 'angular2/router'

import {Auth} from '../auth';
import {Post} from '../post/Post';
import {IPost} from '../post/IPost';
import {AuthorComponent} from '../author/authorComponent';

@Component({
    selector: 'home',
    templateUrl: '/tpls/home/home.html',
    directives: [ROUTER_DIRECTIVES, AuthorComponent]
})

export class HomeComponent implements OnInit {

    private postService: Post;
    private posts: IPost[];

    constructor(@Inject(Http) private http: Http, @Inject(Auth) private auth: Auth) {
        console.log('constructor');
        this.postService = new Post(this.http, this.auth);
        this.getPosts();
    }

    getPosts = () => {
        this.postService.all().subscribe(
            data => this.getPostsCallback(data.json()),
            err => this.logError(err)
        );
    }

    getPostsCallback = (data) => {
        console.log('callback');
        this.posts = data;
    }

    logError = (err) => {
        console.log(err);
    }

    ngOnInit() {
        console.log('init');
        //this.postService = new Post(this.http, this.auth);
        //this.getPosts();
    }

}

Ich füge das CDN-Skript für Authlock in meine Indexseite ein. Scheint, als würde jede Route, zu der ich nach dem Anmelden navigiere, nicht gerendert. Der Rückruf von this.lock.show funktioniert und ich kann die Variablen lesen. Jeder Rat wird sehr geschätzt.

Basiskonzept:https: //plnkr.co/edit/Oz8lY7v6q8GpH71WLtA