wie Google api aus verschiedenen Komponenten, die in Winkel 2

Question

zu verwenden habe ich die Google-Anmeldung in einem Projekt verwendet, wo Benutzer von zwei verschiedenen modals anmelden können. Ich habe die Dokumentation erfolgreich implementiert, die in Google-Anmeldung für Websites https://developers.google.com/identity/sign-in/web/sign-in verfügbar ist. Problem: Die Anmeldung funktioniert nur für ein Modal, das zuerst initialisiert wird. Ein anderer funktioniert nicht.

Answer 1

hinzufügen Skript in app Datei index.html

<script src="https://apis.google.com/js/platform.js" async defer></script> 

App Component

import {Component} from '@angular/core'; 
@Component({ 
    selector: 'my-app', 
    template: ` 
    <create-account></create-account> 
    <signin></signin>` 
}) 
export class AppComponent { 
    constructor() {} 
} 

Konto Komponente erstellen

import {Component} from '@angular/core'; 
@Component({ 
    selector: 'create-account', 
    template: `<h1>{{title}} </h1> 
    <google-signin></google-signin>` 
}) 
export class CreateAccountComponent { 
    title  = "create account page"; 
    constructor() {} 
} 

Anmelden Component

import {Component} from '@angular/core'; 
@Component({ 
    selector: 'signin', 
    template: `<h1>{{title}} </h1> 
    <google-signin></google-signin>` 
}) 
export class SignInComponent { 
    title  = "signin page"; 
    constructor() {} 
} 

Google Signin Komponente

import {Component, ElementRef, AfterViewInit} from '@angular/core'; 
declare const gapi: any; 

@Component({ 
    selector: 'google-signin', 
    template: '<button id="googleBtn">Google Sign-In</button>' 
}) 
export class GoogleSigninComponent implements AfterViewInit { 

    private clientId:string = '409167539692-4eqnaq2jd1itl211gsgh3m2k7i02aefa.apps.googleusercontent.com'; 

    private scope = [ 
    'profile', 
    'email', 
    'https://www.googleapis.com/auth/plus.me', 
    'https://www.googleapis.com/auth/contacts.readonly', 
    'https://www.googleapis.com/auth/admin.directory.user.readonly' 
    ].join(' '); 

    public auth2: any; 
    public googleInit() { 
    let that = this; 
    gapi.load('auth2', function() { 
     that.auth2 = gapi.auth2.init({ 
     client_id: that.clientId, 
     cookiepolicy: 'single_host_origin', 
     scope: that.scope 
     }); 
     that.attachSignin(that.element.nativeElement.firstChild); 
    }); 
    } 
    public attachSignin(element) { 
    let that = this; 
    this.auth2.attachClickHandler(element, {}, 
     function (googleUser) { 

     let profile = googleUser.getBasicProfile(); 
     console.log('Token || ' + googleUser.getAuthResponse().id_token); 
     console.log('ID: ' + profile.getId()); 
     console.log('Name: ' + profile.getName()); 
     console.log('Image URL: ' + profile.getImageUrl()); 
     console.log('Email: ' + profile.getEmail()); 
     //YOUR CODE HERE 


     }, function (error) { 
     console.log(JSON.stringify(error, undefined, 2)); 
     }); 
    } 

    constructor(private element: ElementRef) { 
    console.log('ElementRef: ', this.element); 
    } 

    ngAfterViewInit() { 
    this.googleInit(); 
    } 
} 

Ansicht Code und Test-Demo auf Plunker