在我的.net core asp角度应用程序中使用第三方js库。该库在$(document).ready方法中应用其逻辑。因此,由于$(document).ready方法不会触发,因此库在角度路线更改上无法正确应用时会出现问题。
我在我的angular-cli脚本部分中引用了外部js库。
我打开了第三方js文件,并在其中添加了一个方法,该方法调用与准备好文档时所调用的逻辑相同的逻辑。我只是在努力寻找一种从我的角度打字稿组件调用该方法的方法。
我创建了一个简单的缩减js文件,以对其进行测试并简化问题。我的脚本-angular-cli.json中引用了以下Tester.js:
AttributeError
我希望能够从ts组件文件中调用CallMe()方法。 CallMe()在document.ready事件中按预期被触发了一次,但是我需要弄清楚如何从ts脚本中调用此ad hoc。
有什么想法吗?
答案 0 :(得分:4)
第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行为可能比编辑单个供应商文件更容易出错。