Angular 外部 js 库调用 Document.Ready

Posted 2023-03-13

【中文标题】Angular 外部 js 库调用 Document.Ready

【英文标题】：Angular External js library calling Document.Ready

【发布时间】：2018-12-08 05:48:17

【问题描述】：

在我的 .net core asp angular 应用程序中使用第 3 方 js 库。该库在 $(document).ready 方法中应用它的逻辑。所以我遇到了一个问题，因为 $(document).ready 方法没有触发，所以库没有正确应用于角度路径更改。

我在 angular-cli 脚本部分引用了外部 js 库。

我打开了第 3 方的 js 文件并向其添加了一个方法，该方法调用的逻辑与他们在准备好的文档中调用的逻辑相同。我只是在努力寻找一种从我的角度打字稿组件中调用该方法的方法。

我创建了一个简单的 js 文件来测试它并简化问题。我有以下 Tester.js，它在我的 -angular-cli.json 脚本标签下被引用：

(function ($) 
    "use strict";

    $(document).ready(function ()         
        CallMe();
    );

    function CallMe()
         console.log('HEY I GOT CALLED');
    

 )(jQuery);

我希望能够从 ts 组件文件中调用 CallMe() 方法。 CallMe() 在 document.ready 事件上按预期被触发一次，但我需要弄清楚如何从我的 ts 脚本中调用这个 ad hoc。

有什么想法吗？

【问题讨论】：

我认为您包含的 js 在浏览器触发就绪事件后被调用。所以必须在视图初始化之前注册事件。尝试在根组件的构造函数中执行库。它应该在构造 DOM 之前注册事件。

在 lib 或更高版本上打开问题：分叉并提出修复以根据需要导出函数

混合使用 Angular 和 jQuery 绝不是一个好主意。寻找一个不同的库或考虑在 Angular 直接实现它。

【参考方案1】：

第 1 步

检查npm 上的外部库是否可用。如果是这样，您可能能够导入所需的功能，而不是更改供应商的文件。

例如，它可能提供这样的 API：YourTsComponent.ts

const CallMe = require('library').CallMe
// or
import  CallMe  from 'library'

// on route change
CallMe()

如果有类似的东西可用，那就太好了，否则......

第 2 步

通过全局确认您的理论（临时将CallMe 附加到窗口）。如果您的理论是正确的，您应该能够通过在路由更改时调用此全局变量来获得所需的行为。

Tester.js

(function($) 
  "use strict";

  $(document).ready(function() 
    CallMe();
  );

  function CallMe() 
    console.log('HEY I GOT CALLED');
  

  // TODO - remove (test only)
  window._CallMe = CallMe
)(jQuery);

YourTsComponent.ts

// on route change
window._CallMe()

如果那不起作用，您必须重新评估您的理论。

如果是这样的话……

第 3 步

将供应商的库转换为您的应用可以使用的模块。您的里程可能会根据您使用的模块系统（如果有）而有所不同。例如，如果您使用的是 require.js：

Tester.js

(function(factory) 
  if (typeof define === 'function' && define.amd) 
    // AMD
    define(['jquery'], factory);
   else if (typeof exports === 'object') 
    // CommonJS
    factory(require('jquery'));
   else 
    // Browser globals
    factory(jQuery);
  
(function($) 
  "use strict";

  function CallMe() 
    console.log('HEY I GOT CALLED');
  

  $(document).ready(function() 
    CallMe();
  );

  return CallMe
));

YourTsComponent.ts

const CallMe = require('/path/to/tester.js')

// on route change
CallMe()

如果您不热衷于重写供应商的库

您可以考虑覆盖.ready 的默认行为，以便重新触发它。 There Are a few answers here if you want to go this route，但请注意，覆盖默认的 jQuery 行为可能比编辑单个供应商文件更容易出错。