Angular 2 和 Intercom.io

Posted 2023-02-16

【中文标题】Angular 2 和 Intercom.io

【英文标题】：Angular 2 & Intercom.io

【发布时间】：2016-11-15 11:38:13

【问题描述】：

我想在我的 Angular 2 应用程序中使用对讲机。

对讲SPA指令为here

我已经将脚本块放在我的 index.html 页面的头部，我接下来的想法是将以下内容放在我的应用程序组件中

ngOnInit()

    window.Intercom("boot", 
app_id: "abcd",
name: "Jane Doe", // Full name
email: "[e-mail]", // Email address
created_at: 1312182000 // Signup date as a Unix timestamp
);

但是，它不会编译说 [ts]

类型“窗口”上不存在属性“对讲机”。

如何使用 Angular2 和 webpack 使其工作并继续进行？

【参考方案1】：

我找到了将 Angular 2 集成对讲机的答案

更新 Angular 2 的对讲指令 而不是这个：

 window.Intercom("boot", 
    app_id: "abcd",
    name: "Jane Doe",
    email: "[e-mail]", 
    created_at: 1312182000 
    );

使用它来使其工作：

(<any>window).Intercom("boot", 
app_id: "abcd",
name: "Jane Doe", 
email: "[e-mail]",
created_at: 1312182000 
);

【讨论】：

感谢马库斯，拯救了我的一天！你是否也运行 (window).Intercom("update");在每个路由器出口组件的 ngOnInit() 上？

【参考方案2】：

您可以将窗口声明为： declare let window:any;

然后正常使用window.Intercom：window.Intercom('update');

【参考方案3】：

我很高兴地通知您，有一个 NPM 模块就是为此而生的！它在这里可用。 https://www.npmjs.com/package/ng-intercom

最新版本还有更多对讲方式和指令，让你的生活更轻松！文档在这里：https://github.com/CaliStyle/angular2-intercom/tree/1.0.0-alpha

阅读媒体帖子：https://medium.com/@wilsonhobbs/integrating-intercomjs-with-your-angular-app-with-ngintercom-da38b8bcd415

【参考方案4】：

我叫 Martin，是 Intercom 的客户支持主管之一。遇到了这个问题。

该错误看起来像是未加载对讲库。您是否将此脚本包含在代码中的其他位置。使用您的应用 app_id 切换 app_id？确定是被调用了吗？

(function()var w=window;var ic=w.Intercom;if(typeof ic==="function")ic('reattach_activator');ic('update',intercomSettings);elsevar d=document;var i=function()i.c(arguments);i.q=[];i.c=function(args)i.q.push(args);w.Intercom=i;function l()var s=d.createElement('script');s.type='text/javascript';s.async=true;
    s.src='https://widget.intercom.io/widget/app_id';
    var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);if(w.attachEvent)w.attachEvent('onload',l);elsew.addEventListener('load',l,false);)()

如果您有，但您仍然看到此问题，最好访问Intercom 并通过我们在右下角的信使与我们联系。或发送电子邮件至 [e-mail]，我们可以在那里与您联系！

【讨论】：

嗨 Martin，这个问题是 Angular 2 特有的，这是一个编译错误，实际上是关于如何在 Angular 2 中引用和访问这个脚本。我有联系对讲机支持，他们没有帮助或示例除了我的问题中列出的 SPA 说明之外，回答您的问题是，我正在使用我的 appid，我无法调用该函数。