Question

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

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

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

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

我有以下问题：

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

Answer 1

您应该为这些函数找到/写自己的类型定义。在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.
  }
}

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

1 个答案: