如何从jQuery调用Angular方法

Question

这个问题类似于使用Jquery调用Angular函数

但我认为我的例子有很小的不同.

在Angular项目上我有一个按钮:

<button id="button1" #tbName title="tbName" class="btn btn-lg btn-outline-primary" (click)="open(content,tbName.title)">Launch demo modal</button>

在TS文件上有一个方法:

open(content, title) {
    console.log(document.getElementById('button1').getAttribute('title'));
    this.id_desk = document.getElementById('button1').getAttribute('title');
    this.modalService.open(content, { centered: true, container: '#test', ariaLabelledBy: 'modal-basic-title' }).result.then((result) => {

        this.closeResult = `Closed with: ${result}`;
    }, (reason) => {

        this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
}

怎么看起来像jQuery函数会直接调用open(content,title)angular方法？

Answer 1

我强烈建议你学习使用Angular(&w/o JQuery)而不是混合两者.

现在我们在SOF上,你问了些什么.你的代码有很多问题,但是,嘿,这不是我的项目,所以我只是回答.

如果要使用JQuery访问Angular函数,请将其绑定到窗口,如此.

ngOnInit() {
  window['MyComponent']['open'] = this.open.bind(this);
}

现在在JQuery中,您可以使用它来访问它

$(...).click(function() {
  window.MyComponent.open('content of the modal', 'title of the modal');
});