Question

我正在使用带有角度cli的角度2

我知道如何使用angular-cli.json导入。但是我想在组件中导入。

原因是文件太大，我不希望在初始系统加载时加载它。

如何加载特定组件时加载外部库？

我的系统将使用库来接收我的客户付款。我需要将此库导入我的付款组件：https://stc.pagseguro.uol.com.br/pagseguro/api/v2/checkout/pagseguro.directpayment.js

导入后，我需要使用此导入文件的某些功能来生成令牌。有了这个令牌，我可以进行支付交易。

我的问题是我不想将此文件上传到初始上传。我想只在调用特定路由时加载。例如：/ pay-signature

Answer 1

由于TypeScript 2.4您可以选择在代码本身中使用import语句，因此您可以编写自己的加载程序来加载库：

async getLib(name: string): Promise<any> {
    return await import(name);
}

对于使用该库的任何路径，您应该围绕Resolve服务进行包装。

如果您不想/可以使用最新的TypeScript，您可以创建script标记并收听load事件：

getLib(name: string): Promise<any> {
    return new Promise((resolve) => {
       let script: HTMLScriptElement = document.createElement('script');
       script.addEventListener('load', r => resolve());
       script.src = string;
       document.head.appendChild(script);      
    });    
}

如何在组件中导入库javascript（在组件内）？

1 个答案: