在Angular 4中执行javascript函数答案

【问题标题】：Execute javascript function in Angular 4在Angular 4中执行javascript函数
【发布时间】：2017-10-01 01:21:42
【问题描述】：

我正在使用 facebook 进行身份验证，该身份验证会在用户通过身份验证后打开新选项卡并将用户重定向到端口 8080 上的后端。然后他被重定向回应用程序。从那里我想关闭窗口并在开启器窗口window.opener.functionAfterFinish() 上调用函数，这将让它知道身份验证已完成。问题是我必须在 index.html 中有这个功能才能工作。如果我在组件中创建functionAfterFinish(): void{...}，它将不会被调用。

我有什么选择？我应该如何将该函数放入组件中并执行它？

【问题讨论】：

问题不清楚，但您可以尝试名为 ngx-facebook 硬编码 javascript 实例的 Facebook SDK 角度包装器。

标签： javascript angular typescript oauth-2.0

【解决方案1】：

好吧，我建议你使用 cookie。

首先，您需要在重定向到新选项卡时创建 cookie。例如：this._cookieService.createCookie('fbCookies', 'success', 3);

现在，您需要在获取身份验证响应的方法中使用设置的时间间隔来检查 cookie。例子-

    let interval = setInterval(function(){
                     let cookie = this._cookieService.readCookie('fbCookies');
                     if (cookie === 'success') {
                         newWindow.close();
                         clearInterval(interval);
                     }else if (cookie === null) {
                           clearInterval(interval);
                           newWindow.close();
                     }
                 }, 5000);

因此，一旦您获得成功选项卡就会关闭。

【讨论】：

我知道，但这不是一个好的解决方案。回调函数是我想要的，但我不知道如何访问组件中的函数。我只能访问 index.html
“但我不知道如何访问组件中的函数”，您到底想说什么？你能解释一下或在这里发布你的代码，以便我可以提供帮助。

【解决方案2】：

你必须在window对象上设置你的组件服务或方法

在您的服务/组件内部：

askFacebook(){
  (window as any).functionAfterFinish=this.functionAfterFinish.bind(this);
  // Do ask facebook
}

确保在角度区域中运行回调。

（对不起，我正在用手机回答。如果您有任何问题，请随时发表评论）

【讨论】：