将 Gapi 与 Angular 一起使用 - signOut().then() 而不是 运行 在右侧区域

Question

我正在添加 Google 登录到我的 Angular 项目。我按照这个 设置了 gapi。

然后我 运行 遇到了 NgZone 外 运行 代码的问题，并用 SO question.

解决了这个问题

现在可以正常登录了。但是，我一直无法退出工作。该功能本身有效：Google 将用户从我的应用程序中注销。只有在您重新加载页面并必须重新登录时才会注意到。但是，代码的 Angular 部分出错了。我收到以下错误：
Uncaught TypeError: Cannot set property 'token' of undefined

其中 undefined 应该是 this。不幸的是，我在 Angular 中找不到任何使用 Google 退出的例子。我在 GitHub 上看到的每个教程和示例项目都只让用户登录。

我已经尝试了 ar运行 代码与 ngZone.run() 的各种组合。我也试过传递 auth2.signOut().then() 一个 Observable 的 next() 函数，但这产生了同样的错误。传递 ngZone.run() 也没有用，也产生了同样的错误。

// This code errors. I've tried putting ngZone.run() inside the  
// .then() as well with the same error of 'this' being undefined  

this.ngZone.run(() => {
    const auth2 = gapi.auth2.getAuthInstance();
    auth2.signOut().then(function () {
        auth2.disconnect();
        this.token = null;
        this.router.navigateByUrl('/pages/login');
    });
});


// This code works, it's in the component where the sign in with Google button is  

public onSignIn(googleUser) {
    this.ngZone.run(() => {
        const p = googleUser.getBasicProfile();
        const r = googleUser.getAuthResponse();
        <snipped for relevance, accessing this.* works here>
    });
}

Answer 1

想通了。您可以创建一个变量来存储 this 并传递该变量并使用它代替 this.

this.ngZone.run(() => {
    const self = this;
    const auth2 = gapi.auth2.getAuthInstance();
    auth2.signOut().then(function () {
        auth2.disconnect();
        self.token = null;
        self.router.navigateByUrl('/pages/login');
    });
});