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

2023年4月12日 349次阅读

我正在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.
  }
}
点赞