从jQuery调用Angular 9函数
有没有可能从jQuery调用Angular 9组件中编写的函数？
我有一个Angular 9应用程序，在其中我可以包含一些用jQuery编写的小插件。现在我想从Angular 9应用程序到jQuery插件提供一些简单的函数。
例如，显示确认模式(以便于使用主应用程序中使用的确认模式)。
然后，我需要调用带参数的角度函数(要在模式中显示的文本)，并在用户确认后获得响应。
下面是一些用于将jQuery插件加载到标记中的Angular组件的示例，其中提供了jQuery插件的方法：
@Component({
selector: 'ov-plugin-loader',
templateUrl: './plugin-loader.component.html',
styleUrls: ['./plugin-loader.component.scss'],
})
export class PluginLoaderComponent implements OnDestroy {
public readonly head = document.getElementsByTagName('head')[0];
public htmlString: SafeHtml;
constructor(....) { }
public callMeFromJquery (title: string, message: string): Observable<any> {
return ...
}
}然后，我想从我的jQuery代码中调用该函数：
class MyJQueryPlugin {
doSomething() {
[call callMeFromJquery('header','content')]
}
}回答 2
Stack Overflow用户
发布于 2020-06-24 16:23:44
因此，首先您不应该在Angular应用程序中使用jQuery。一旦我们开始在Angular应用程序中使用jQuery，我们就面临着很多问题。
由于这是一个非常老的应用程序，我们设法使用JavaScript中的自定义事件概念从jQuery代码中调用了angular函数。
基本上，您需要在jQuery代码中定义自定义事件，如下所示。
var myDialogEvent = new CustomEvent("showDialog", {
cancelable: true,
detail: {
desc: "Display alert message with custom text",
time: new Date(),
}
});
var myDialogEvent = new CustomEvent("showDialog", {});
上面的代码将定义名为showDialog的自定义事件
您可以将此事件分派到您想要的任何位置，比如按钮、单击处理程序或ajax响应。确保将数据传递给此事件，以便您可以在angular代码中访问它。在本例中，我传递的是detail对象。
window.dispatchEvent(myDialogEvent);
现在你可以在你的angular代码中监听这个自定义事件了。
// listen to the custom event in angular code (inside ngOnInit() method)
window.addEventListener('showDialog', function(event) {
if (event.detail) {
alert(event.detail.desc);
}
});
Stack Overflow用户
发布于 2020-06-24 18:39:08
我认为混合jQuery和Angular是一个糟糕的概念，但你可以做很多事情来归档它。最原始的解决方案是:全局公开您的angular函数：
<script>
jQuery('#jquery-action').on('click', () => {
jQuery('#jquery-action').html('JQuery called angular, and it said : '
+ callAngular('jquery'));
});
</script>在一个角度组件中：
constructor() {
window['callAngular'] = this.callAngular;
}
callAngular(data) {
return `Hello '${data}', I am Angular.`;
}而不是直接共享函数，也许我会想出一些全局对象来显示在包含所有函数的窗口中，这些对象必须从外部访问...
https://stackoverflow.com/questions/62549401
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号