Google Auth Javascript API 与 Angular Material 组件混淆

Question

我有一个 Angularv5 项目，其中包含许多 Angular Material 组件。我已经使用gapi.auth2 成功设置了通过谷歌登录。问题在于，似乎使用gapi.auth2 inside 角度组件在很大程度上破坏了 Angular 渲染（官方）材质组件的能力。我的意思是，在成功通过gapi 进行身份验证后，单击mat-checkbox 不再选中复选框。 matInput 元素无法交互。覆盖层元素出现在屏幕的随机区域，而不是适当地拴在它们的父级上（例如mat-select 的覆盖层）。认证前没有问题。

如果我将gapi.auth2.authorize 代码移出组件并进入index.html 标头，并在页面加载后触发它运行，那么一切都会顺利运行。不幸的是，我想从我的应用程序中触发身份验证...我尝试使用NgZone 在 Angular 区域之外运行身份验证代码，但没有运气。有任何想法吗？我不知所措。我应该注意，经过身份验证后，我还从我的应用程序中调用了 Google Drive api，这似乎不会导致任何问题。据我所知，只是 gapi.auth2 引起了问题。

我正在使用的代码成功通过 Google 进行身份验证

const googleAuth = gapi.auth2.getAuthInstance();

googleAuth.then(() => {
  googleAuth.signIn().then((result) => {
    this.signinSuccess();
  });
})

Answer 1

我相信我在一个项目中使用它如下：

  googleAuth.signIn().then((result) => {
    this.signinSuccess();
  });

基本上我没有googleAuth.then(() =>，因为 googleAuth 不是一个承诺。