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

在我的.net核心asp角度应用程序中使用第三方js库.该库在$(document).ready方法中应用它的逻辑.所以我有一个问题,即库不能正确应用角度路由更改,因为$(document).ready方法不会触发.

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

我打开了第三方js文件,并为其添加了一个方法,该方法调用与文档准备好相同的逻辑.我只是在努力寻找一种从我的angular typescript组件中调用该方法的方法.

我已经创建了一个简单的剪切js文件来测试它并简化问题.我有以下Tester.js,它在我的-angular-cli.json中在scripts标签下引用：

(function ($) {
"use strict";
$(document).ready(function () {
CallMe();
});
function CallMe(){
console.log('HEY I GOT CALLED');
}
})(jQuery);


我希望能够从ts组件文件内部调用CallMe()方法. CallMe()会在document.ready事件中按预期触发一次,但我需要弄清楚如何在我的ts脚本中调用此ad hoc.

有任何想法吗？

解决方法:

步骤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行为可能比编辑单个出售文件更容易出错.