Question

这个问题类似于那个Call Angular Function with Jquery

但是我认为我的例子差别很小。

在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)}`;
    });
}

看起来像直接调用open(content,title)角度方法的jQuery函数？

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');
});

Answer 2

通常，您无法触发在Angular组件中定义的方法，因为为此您需要类的实例。请注意，您如何从未在代码中的任何地方调用new Component()？相反，您只需指定类并将它们与模板绑定在一起，然后由Angular完成其余工作。

也就是说，您可以将该方法作为对全局对象的引用。例如，您可以执行以下操作：

class Component {
  public fn () {} // <-- say you need this function
  constructor () {
    window.fn = this.fn.bind(this)
  }
}

执行构造函数后，您将可以从任何文件调用window.fn()。请注意，如果您希望具有该组件的多个实例，则此方法将失败。如果这样做，则需要将方法引用保存在数组或对象中。

也就是说，强烈建议不要这样做，因为这会使代码变得一团糟。

如何从jQuery调用Angular方法

2 个答案:

我强烈建议您学习使用Angular（＆w / o JQuery），而不要将两者混为一谈。