Как вызвать метод Angular из jQuery

Question

Этот вопрос похож на этот Вызов угловой функции с 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)}`;
    });
}

Как должна выглядеть функция jQuery, которая будет напрямую вызывать open(content,title) угловой метод?

Answer 1

Как правило, вы не можете вызвать метод, определенный внутри компонента Angular, потому что для этого вам нужен экземпляр класса. Заметьте, что вы никогда не вызываете new Component() в вашем коде? Вместо этого вы просто указываете классы и связываете их с шаблонами, а Angular делает все остальное.

Тем не менее, вы можете передать метод как ссылку на нечто глобальное. Например, вы можете сделать что-то вроде этого:

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

После выполнения конструктора вы сможете вызывать window.fn() из любого файла. Обратите внимание, что этот подход не работает, если вы ожидаете иметь несколько экземпляров компонента. Если вы это сделаете, вам нужно сохранить ссылки на метод в массиве или объекте.

Тем не менее, это настоятельно не рекомендуется, так как делает код беспорядочным для чтения.

Answer 2

Я настоятельно советую вам научиться использовать Angular (и без JQuery) вместо того, чтобы смешивать двойки.

Теперь мы на SOF, и вы кое-что спросили. В вашем коде много неправильного, но, эй, это не мой проект, поэтому я просто отвечу.

если вы хотите получить доступ к функции Angular с помощью JQuery, привяжите ее к окну следующим образом.

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

Теперь в JQuery вы можете получить к нему доступ

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