Angular2 - Google 登录按钮 - 无法读取 null 属性“样式”

2024-01-07

我有 Angular2 应用程序,其中包含登录用户的组件。用户登录后,我立即路由到某个页面,但在控制台中收到几个错误:

Uncaught TypeError: Cannot read property 'style' of null
    at G_ (cb=gapi.loaded_1:91)
    at H_.<anonymous> (cb=gapi.loaded_1:94)
    at Function.<anonymous> (cb=gapi.loaded_0:155)
    at run (vendor.js:99284)
    at runIfPresent (vendor.js:99313)
    at onGlobalMessage (vendor.js:99353)
    at ZoneDelegate.invokeTask (vendor.js:81254)
    at Zone.runTask (vendor.js:81130)
    at ZoneTask.invoke (vendor.js:81324)

在 apis.google.com 中:window.document.getElementById((c?"not_signed_in":"connected")+a.El).style.display="none";

如果用户登录、导航到随机页面然后从 Chrome 注销,也会发生这种情况。

有没有什么活动gapi or gapi.auth2断开监听器,这样我就可以避免错误。我认为这应该发生在ngOnDestroy。或者也许配置应该说“渲染 SingIn 按钮后,不要管它”。

我认为问题是因为我使用gapi.signin2.render。结束的主题是this https://stackoverflow.com/questions/34688248/google-throws-cannot-read-property-style-of-null-error-after-login-logout-if,但我无法使用解决方案“只是隐藏元素而不删除它".

Edited:

如果有帮助,这是我的渲染代码:

ngAfterViewInit()
{
    gapi.load("auth2", () =>
    {
        gapi.auth2.init({
            client_id: "************"
        });
        gapi.signin2.render(
            this.googleLoginButtonId,
            {
                onsuccess: (user) => { this.onGoogleLoginSuccess(user); },
                onfailure: (error) => { this.onGoogleLoginError(error); },
                scope: this.scopes.join(" ")
            });
    });
}

None

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular2 - Google 登录按钮 - 无法读取 null 属性“样式” 的相关文章

  • 在 Angular 上开发时无法自动完成和自动导入

    我已经在 Windows 上安装了最新的 VSCode 然后我安装了 languaje 对 TypeScript 的支持 最后 设置一些编辑器选项并安装一些扩展 编辑器配置 editor fontSize 12 editor minimap
  • 很棒的字体图标没有出现在 Angular 5 中

    我按照说明安装了它 首先我输入了 npm install save font awesome angular font awesome 并且一切都正确安装了 然后我换了 angular cli json包含这样的 css styles st
  • viewChild如何获取Angular2中添加了js的元素?

    如果一个 HTML 元素已添加到 DOM 中 例如单击按钮后 我们如何访问该元素 viewChild 看不到它 更新1 更多说明 我用过 jquery 数据表 jquery dataTablesdefineTyped 版本 https gi
  • 在 pre 标签内电子加载 html

    我最近创建了一个电子 角度应用程序 它在内部运行以下内容main ts win loadURL url format pathname path join dirname dist index html protocol file slas
  • ng run project:deploy - 项目目标不存在

    我有一个 Angular Web App 的工作生产版本 我的 Azure 帐户 免费套餐 上有一个有效订阅 其中包含 AppService 计划 应用服务 资源组 存储帐户 KeyVault SQL Server 和 SignalR 我想
  • Chartjs + Angular6 未显示图表或任何错误

    我正在尝试以角度实现chart js 编写了一个简单的代码来在html上显示图表 但是页面上没有输出 也没有错误 我不明白问题出在哪里以及为什么显示图表失败 堆栈闪电战 https stackblitz com edit angularch
  • 使用 HttpClient 而不是 Http,类型“Subscription”不可分配给类型“Observable”Angular 5

    我正在尝试使用新的 HttpClient 类而不是旧的 Http 我想映射从订阅方法获得的数据 但出现以下错误 关于为什么我得到这个有什么建议吗 Code export class YoutubeSearchService construc
  • 是否可以使用纯 css 禁用 mat-tab 动画

    我想禁用 Angular Material mat tab 动画 内容滑入到位时发生的动画 我知道可以使用 disabled 属性 但我想知道是否可以使用纯 css 达到相同的效果 EDIT 我们的用户体验团队希望从材质选项卡中删除幻灯片动
  • 将 Angular v12 升级到 v13 时出现“模块未找到”错误

    嗨 开发者和贡献者 我正在努力找出以下错误的问题所在 src app models type ModelType ts 2 0 44 错误 找不到模块 错误 导出字段无法解析目录 请求为 当我将 Angular 版本从 v12 升级到 v1
  • 模拟 ngrx/store

    这是关于 Angular 2 官方版本的 我知道单元测试在 beta RC 和正式版本之间发生了巨大的变化 当 ngrx store 用作构造函数中的参数时 在单元测试中模拟 ngrx store 的好方法是什么 这并不像嘲笑服务那么简单
  • Highcharts / Highmaps with Angular - 无法运行演示

    我正在发现 Highcharts Highmaps 现在 我想使用在我的机器上重现一些演示示例角6 但我无法让它发挥作用 官方的 JS 示例在这里 https www highcharts com maps demo map drilldo
  • 如何安装旧版本的 Angular?

    我需要安装 Angular 2 但是当我运行时 ng new myApp版本是4 我搜索了很多 但找不到只安装版本2的方法 有谁知道该怎么做 Edit the command ng new MYAPP ng4 false It does n
  • 如何检查 Angular 7 中的输入字段是否处于焦点[重复]

    这个问题在这里已经有答案了 我有一个表单 我想知道表单中的任何输入字段是否获得焦点 我读了 NgForm 文档但没有找到任何相关的 focus I found touched但它不能满足需求 您可以使用焦点和模糊事件来跟踪字段获得或失去焦点
  • Angular 2:ngModel 输入上“数字”管道的光标问题

    我有一个输入 我想像货币一样显示 我希望只允许两位小数 并且只允许数字 同时在必要时自动添加逗号 基本上 如果用户输入 12345 我希望输入自动显示为 12 345 00 12 345 也可以接受 但如果他们输入 12345 5 则需要显
  • ng 测试在角度通用错误“不完整:未找到规格,用种子 48751 随机化”中失败

    在运行 ng test 命令时将 Angular 7 项目转换为 Angular Universal 错误为 Incomplete No specs found randomized with seed 48751 尝试了不同的方式在 st
  • 导入 ng2-datetime 时遇到问题

    我正在尝试将 ng2 datetime 导入到我的应用程序中 因为它似乎是唯一可用的日期选择器弹出窗口 可以让您限制日期范围 无论如何 根据其文档 https www npmjs com package ng2 datetime 我安装了n
  • 如何在Electron App中调用C# dll方法?

    我有一个电子应用程序 可以从读卡器读取信用卡详细信息 他们提供了一个 c dll 来与应用程序交互 我不知道如何从电子应用程序读取 dll 方法 首先使用以下命令检查 dll 中公开的函数依赖步行者 http www dependencyw
  • 使用 Javascript 在前端创建基本 URL(开发、API 和生产)

    无论开发和部署如何 如何制作适用于 http https localhost 端口和实际域的基本 url 我想创建一个可以在所有场景或条件下工作的基本 url 无论 http https 协议 端口 本地主机和实际域如何 无论是在开发中还是
  • 将路由参数从父路由传递到子路由

    我的路线结构如下 parent id child child 我可以通过以下方式从父组件获取参数吗 ngOnInit this route params subscribe params gt this id params id 然后将其作
  • Angular 中的动态子组件

    我正在构建一个具有一致的元素列表设计模式的应用程序 如果我有一个 A 类型的对象 我会创建AComponent它接受a作为输入 然后创建另一个组件来迭代 A 列表 AListComponent 那么如果我有一个对象 B 我需要做同样的事情

随机推荐

  • onStartJob 和 onStopJob 无法在 android 中运行后台线程

    实际上我想使用 JobScheduler 进行通知 无论应用程序是否处于活动状态 我是 android 新手 首先只是尝试运行后台 AsyncTask 来检查它是否工作正常 但它不起作用 这是我的 JobService 代码 public
  • PyCharm - 作者是否出现在导入之前?

    当您创建新的 python 文件并添加新的导入时 PyCharm 会尽可能自动添加导入和 author 标签 但是 默认情况下 author 标签将始终出现在任何导入的下方 在我看来 author 标签应该位于文件的顶部 我也可以在其中放置
  • 在 RoR 中哪里可以重新开放课程

    我正在尝试重新打开StringRails 中的类并添加更多方法供我的应用程序使用 编写代码不是问题 我的问题是该代码应该放在哪里 对我来说 在不同的模型文件中重新打开一个类是没有意义的 因为它实际上与任何模型都没有任何关系 我想也许在某个地
  • LINQ - 组合多个列表以形成一个新列表并按键对齐它们?

    我有两个不同列的列表 但每个列表都有一个具有相同键的公共列 如何将它们组合成一个新列表 即 public class TradeBalanceBreak public int CommID get set public int CPFirm
  • 如何防止 Vue 中的对话框完成之前选择表单被更改

    我有一个包含各种选项的选择字段 当用户单击该字段来更改当前选择时 我需要启动一个提示 让用户确认他们希望继续更改 因为这将需要他们重做一个漫长的过程 如果他们取消更改 则需要防止所选选项发生更改 因为即使是快速的临时更改也会触发客户端上的自
  • “内部”与“关联”流缓冲区之间的区别

    From http www cplusplus com reference ios ios rdbuf http www cplusplus com reference ios ios rdbuf 一些派生流类 例如 stringstrea
  • 如何使用 Spring Data JPA 和 Spring Security 实现 AuditorAware?

    我们在应用程序中使用 Hibernate JPA Spring Spring Data 和 Spring Security 我有一个标准User使用 JPA 映射的实体 此外 我还有一个UserRepository public inter
  • Git:将本地git子模块(包括子模块文件)推送到远程裸存储库

    我有两个负责管理的本地项目git 一个依赖另一个 就像这样 project A project B file B file B 对我来说这是有道理的project B作为 git 子模块project A 现在 我已经设置了远程bare存储
  • android .getTop() 返回 0.0

    我正在开发一个安卓锁屏应用程序 我从另一个线程中得到了这个想法 检查手指按下的坐标与我设置的图像按钮的坐标 我正在尝试使用以下方法获取图像按钮的坐标 getTop and getLeft 但两者都返回 0 0 因为它们是浮点数 而不是整数
  • 如何直接使用 NGINX 提供所有现有静态文件,但将其余文件代理到后端服务器。

    location proxy set header X Real IP remote addr proxy set header Host host proxy set header X Forwarded For proxy add x
  • C# 中 bool* 的用处

    我可以用吗bool 以任何有意义的方式 我将如何转换bool to a byte例如 或存储bool 以一个字节为单位 我的目标是在我的项目中管理我自己的记忆 具体细节并不重要 只是我喜欢做的事情 现在我希望能够存储我自己的变量 并且我恰好
  • 加快应用程序脚本上的行删除速度

    我编写了这段代码 根据列是否为空来删除空行 代码正在运行并执行其需要执行的操作 但是从包含超过 15k 行的工作表中删除数据需要 10 多分钟数据 有没有办法加快速度 function deleteEmptyRowsAll var shee
  • 为什么 clang 不被更多地使用? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • Mongodb C# 驱动程序更新所有子数组元素

    我想更新文档并将值设置为子文档数组 使用文档 https docs mongodb com manual reference operator update positional all up S 5B 5D我必须使用 操作员 下列的thi
  • gnuplot 上的相关系数

    我想使用拟合函数绘制数据 function f x a b x 2 绘图后我得到这个结果 correlation matrix of the fit parameters m n m 1 000 n 0 935 1 000 我的问题是 如何
  • Excel 不断加载我的电子表格,但出现错误

    当我加载电子表格时 我不断收到此错误 它让我修复它 这会剥夺所有验证器 该文件保存为 xlsm Excel 在 中发现不可读的内容是否要恢复此工作簿的内容 如果您信任此工作簿的来源 请单击 是 您必须单击 是 否则将无法加载 然后我得到这个
  • 如何在三个 JS 网格中对共面三角形进行分组?

    我正在开发一种建模工具 可以让您直接操作网格 例如 您可以抓住一张脸并将其拖动 用户对 脸 的感知可能是多个共面三角形 例如 立方体的顶 面 实际上是两个三角形 它们被拖到一起形成一个正方形 为了实现这一点 我想收集任何特定三角形的所有共面
  • 通过 zxing 扫描意图传递额外数据

    我正在使用集成条形码扫描仪https github com zxing https github com zxing 我想传递一些额外的数据 uuid下面 以及条形码 Both uuid1 and uuid2低于收益率null 我缺少什么
  • 从 Windows 中删除 pgadmin 4

    我正在使用 pgadmin 4 1 2 它非常慢 我安装了 pgadmin 3 它的效果非常好 如何从 Windows 2008 R2 计算机中删除 pgadmin 4 Kr A H 今天我测试 正如其他答案所说 pgAdmin 如果独立于
  • Angular2 - Google 登录按钮 - 无法读取 null 属性“样式”

    我有 Angular2 应用程序 其中包含登录用户的组件 用户登录后 我立即路由到某个页面 但在控制台中收到几个错误 Uncaught TypeError Cannot read property style of null at G cb