我正在使用Typescript创建一个插件，它为Header创建一个DOM并将其附加到页面。该项目使用JQuery进行DOM操作。我想将配置选项从HTML页面传递给插件。为此，我使用自定义函数扩展JQuery并传递其中的选项。
但问题是当我加载那个HTML页面时，我收到一个错误：“$（...）。createCentralHeader不是一个函数”。
这是我的Index.html文件：
<!DOCTYPE html>
<html lang="en">
<body class="siteheader-body">
<div class="cep-Header"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="./dist/cep_HeaderCore.js"></script>
<script>
$('cep-Header').createCentralHeader({
headerUrl: "Hello World!!"
});
</script>
</body>
</html>
这是我的main.ts文件：
import * as $ from "jquery";
$.fn.createCentralHeader = function(this: JQuery, options?: HeaderOptions) {
const settings: HeaderOptions = {
headerUrl: options.headerUrl
};
alert(settings.headerUrl);
};
这是我的central-header.d.ts：
interface HeaderOptions {
headerUrl?: string;
}
interface JQuery {
createCentralHeader(options?: HeaderOptions);
}
我正在使用webpack，它使用ts-loader来转换TS并将我的插件捆绑到index.html中引用的文件cep_HeaderCore.js中。
这里要注意的另一个重要事项是，如果我从插件中调用createCentralHeader，它会按预期工作。例如：
import * as $ from "jquery";
$.fn.createCentralHeader = function(this: JQuery, options?: HeaderOptions) {
const settings: HeaderOptions = {
headerUrl: options.headerUrl
};
alert(settings.headerUrl);
};
$("cep-Header").createCentralHeader({
headerUrl: "Hello World!!"
});
这里出了什么问题？
你应该添加到angular.json
"scripts": [
"node_modules/jquery/dist/jquery.min.js"
]
和jquery在main.ts文件中扩展，带有下一个代码
window['$'].fn.test = function (message: string) {
alert(message);
};
或者使用扩展Windows界面而不使用引号中的属性