时间戳

首页 > 解决方案 > Angular 外部 js 库调用 Document.Ready

javascript - Angular 外部 js 库调用 Document.Ready

问题描述

在我的 .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。

有任何想法吗？

标签： javascriptjqueryangulartypescript

解决方案

步骤1

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

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

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

// on route change
CallMe()

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

第2步

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

测试者.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：

测试者.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的默认行为，以便可以重新触发它。如果您想走这条路，这里有一些答案，但请注意，覆盖默认 jQuery 行为可能比编辑单个供应商文件更容易出错。

推荐阅读