Я использую angular
и google-api
для аутентификации пользователей в моей сети, и у меня проблема, потому что мой компонент уже загружен, но google-api
нет. Это мой код компонента:
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
constructor(private authService: GoogleAuthService, private cookieService: CookieService) { }
isUserSignIn(): boolean {
return this.isLoggedIn = this.authService.isUserSignIn();
}
}
, а это мой шаблон:
<div *ngIf="isUserSignIn(); else loginInfo">
<button (click)="signIn()">Login with Google</button>
</div>
<ng-template #loginInfo>
<div>
USER LOGIN
</div>
</ng-template>
и мой сервис входа в систему:
declare let gapi: any;
@Injectable({
providedIn: 'root'
})
export class GoogleAuthService {
private auth2: any;
constructor(@Inject('GoogleClientId') private clientId: string) {
this.loadGoogleLibrary();
}
private loadGoogleLibrary(): void {
let scriptElement = document.createElement("script");
scriptElement.async = true;
scriptElement.defer = true;
scriptElement.src = 'https://apis.google.com/js/platform.js';
scriptElement.onload = () => this.initGoogleApi();
document.head.appendChild(scriptElement);
}
private initGoogleApi(): void {
gapi.load('auth2', () => {
this.auth2 = gapi.auth2.init({
client_id: this.clientId,
scope: 'email',
hosted_domain: 'pdffiller.team'
});
this.auth2.then(() => {
console.log('google auth2 have been loaded successfully');
}, onError => {
console.log('google auth2 haven\'t been loaded: ', onError);
});
});
}
isUserSignIn(): boolean {
return this.auth2.isSignedIn().get();
}
}
и когда я запускаю свое приложение Мой компонент загружается до того, как Google API был запущен. Как можно дождаться загрузки и запуска всей библиотеки google-api
и показать мой login component
в браузере?