角度2は、成功した、Googleのログイン</p> <pre><code><div id="{{googleLoginButtonId}}"></div> </code></pre> <p><strong>onGoogleLoginSuccess</strong>関数が呼び出さ取得されていない

Question

import {Component,Directive,OnInit,NgZone} from 'angular2/core'; 
declare const gapi:any; 
declare const $:any; 
@Component({ 
    selector: 'mysite', 
    templateUrl:'./app/template.html' 
}) 
export class Test{ 
    userAuthToken; 
    userDisplayName; 
    constructor(private zone: NgZone){ 
     gapi.load('auth2',this.initnow); 

     this.zone.run(() => { 
       console.log(this); 
       $.proxy(this.onGoogleLoginSuccess, this); 
     }); 
    } 

    initnow(){ 
     gapi.auth2.init({client_id:'9511021809-qqke9m46imnmrged8u7u66ilj168bi9t.apps.googleusercontent.com'}); 
    } 

    ngAfterViewInit() { 
     gapi.signin2.render(
      this.googleLoginButtonId,{ 
      "onSuccess": this.onGoogleLoginSuccess, 
      "scope": "profile", 
      "theme": "dark" 
     }); 
    } 

    public onGoogleLoginSuccess(loggedInUser) { 
     this.userAuthToken = loggedInUser.getAuthResponse().id_token; 
     this.userDisplayName = loggedInUser.getBasicProfile().getName(); 
     console.log("onGoogleLoginSuccess called: ",this.userAuthToken,this.userDisplayName); 
    } 
} 

template.html後にコールバック関数をトリガしません。 誰でもこのコードで何が欠けていると思いますか？

私は自分のウェブサイトにGoogleログインを統合しようとしています。 Googleログインページが消えても何も表示されません。 ありがとう Suresh

Answer 1

IDをgoogleLoginButtonIdに設定するのを忘れました。設定するだけでボタンが機能します。

export class Test{ 
    userAuthToken; 
    userDisplayName; 
    googleLoginButtonId = 'google_login_button_id'; 
    ... 
} 

しかし、それが問題だった場合、ボタンはまったく表示されません。だから、もしあなたがgoogleLoginButtonIdに設定されていて、あなたの質問にそれを追加するのを忘れたなら。

説明：機能を取り、新しいを返す問題は、私はjQuery男ではないが、私はproxyを見上げると、それは説明で述べている。このラインで

$.proxy(this.onGoogleLoginSuccess, this); 

可能性があり常に特定のコンテキストを持つものです。

だから、あなたは新しい返される関数を保存し、onSuccessコールバックにそれを渡す必要があります。

proxyedSignInSuccess; 
constructor(private zone: NgZone){ 
    this.zone.run(() => { 
     this.proxyedSignInSuccess = $.proxy(this.onGoogleLoginSuccess, this); 
    }); 
} 
... 

ngAfterViewInit() { 
    gapi.signin2.render(
     this.googleLoginButtonId,{ 
     "onSuccess": this.proxyedSignInSuccess, 
     "scope": "profile", 
     "theme": "dark" 
    }); 
} 

か、念のため。おそらく代わりに試してみてください：

ngAfterViewInit() { 
    gapi.signin2.render(
     this.googleLoginButtonId,{ 
     "onSuccess": (user) => this.zone.run(() => this.onGoogleLoginSuccess(user)), 
     "scope": "profile", 
     "theme": "dark" 
    }); 
}