在Angular 2中调用环境(本机)特定的全局javascript函数

发布时间：2020-12-17 17:08:52 所属栏目：安全来源：网络整理

导读：我正在Angular 2中开发一个Web应用程序(通过angular-cli),可以通过简单的URL在本机移动应用程序(在iOS和 Android上)加载. 可以使用桥接功能与本机应用程序进行交互.这些功能被添加到应用程序Web浏览器的全局范围中(因此不存在于普通的Web浏览器中).这样一个

我正在Angular 2中开发一个Web应用程序(通过angular-cli),可以通过简单的URL在本机移动应用程序(在iOS和 Android上)加载.

可以使用桥接功能与本机应用程序进行交互.这些功能被添加到应用程序Web浏览器的全局范围中(因此不存在于普通的Web浏览器中).这样一个函数的一个例子是echoNative(),它返回有关本机平台的信息：

{
  "platform": "iOS","message": "Native received Echo call"
}

在普通的javascript应用程序(没有角度)中,可以在javascript代码中包含这些函数,而不会出现angular-cli抛出错误.

我有以下问题：

>当我使用这些函数时,如何防止angular-cli无法构建我的应用程序？
>是否可以为这些函数编写一个模拟库,如果这些函数存在于全局范围内,则会加载这些函数,如果不存在则提供替换函数？

解决方法

>您应该为这些函数找到/写自己的类型定义.在 documentation中查看有关声明文件的更多信息.最简单的示例类似于创建以下文件：

// src/app/index.d.ts

declare interface Window {
  // This will tell TypeScript,that such function exists on `window`,but won't provide implementation for it. So if there is no implementation somewhere else,TypeScript won't error,but it will fail in runtime.
  echoNative: () => { platform: string,message: string }; 
}

>是的,您可以像在JS中那样执行相同的操作(不要忘记从您的应用程序导入此文件,因此它包含在捆绑包中)：

// src/app/mocks.ts

if (typeof window.echoNative === 'undefined') {
  window.echoNative = () => {
    // Your mock implementation here.
  }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!