コールバックからルータ経由でリダイレクトした後、Angular2コンポーネントにクラス参照がありません

Question

こんにちは私はこの問題を示すためにplunkrを設定しました。 https://plnkr.co/edit/tO4xbD15A3FvjpaGw6J5?p=preview

これは、ログインに成功した後のリダイレクトを行うコードの主要部分です。 ：これはコールバック関数であるように私は例は、ファイル「アプリ/ authentication.ts」と連携し、私は2つのバージョンで入れている...「isLoggedIn」変数に

loginLaunch() { 
console.log("authentication.ts:loginLaunch()"); 
let authProperties = AUTH_PROPERTIES; 
authProperties.immediate = false; 
// Sign the user in, and then retrieve their ID. 
let ga = gapi.auth2.getAuthInstance(); 
let router = this.router; 
let redirect2 = this.redirectUrl; 
ga.signIn(authProperties).then(function() { 
    console.log("authentication.ts:loginLaunch() - logged on:"+ ga.currentUser.get().getId()); 
    //this.isLoggedIn=true; 
    // Redirect the user 
    console.log("authentication.ts:loginLaunch() - logged in now, redirect to "+redirect2); 
    router.navigate([redirect2]); 
}); 
} 

を参照することはできません"app/authentication.ts.works"と "app/authentication.ts.worksNot"

最初のものはダミー認証です（実際にはパスワードを要求しません）。もう1つはGoogle認証を使用します。

問題はこれです。 Google認証（約束/コールバックを使用）では、リダイレクト後のAngular2コンポーネントにコンポーネントクラスへの参照がありません。この場合、ユーザーがログインした後、 "label"の詳細が表示されるはずですが、そうではありません。あなたはここで何が起こっているか考えていますか？

あなたは、「アプリ/ authentication.ts」予想通り、アプリケーションの動作に「アプリ/ authentication.ts.works」の内容をコピーする場合：ラベル情報は、ログイン後にコンポーネント1ページに表示され

。

助けていただければ幸いです。

ヘルムート

Answer 1

これは代わりに、クラスの機能を指すようにthisが発生するためfunction()を使用しないでください。あなたのコードはfunction()のいくつかの用途があり

ga.signIn(authProperties).then(() => { 

：

使用ではなくthisの範囲を維持する機能() =>矢印します。 function()の動作が意図されている場合を除いて（まれに）、それらをすべて置き換えることをお勧めします。

Answer 2

私は問題が何かを解決しました（plunkrの例を更新しました）。 router.navigateを "authenticate.ts"から直接呼び出すのではなく、 "zone.run（）"を使って呼び出す必要がありました。現在のゾーンが無関係な子コンポーネントの変更を取得したことを確認しています（私の推測です...） ：

this.zone.run(()=>{ 
     router.navigate([redirect2]) 
    });