Angular2 - функция вызова из события main.bundle.js / mermaid click

Я работаю с Angular2 в Electron, засеянном из https://github.com/maximegris/angular-electron

Я установил Mermaid, и он работает почти так, как мне нужно. Моя блок-схема отображается правильно, как и предполагалось.

Единственная проблема, с которой я столкнулся, - это событие щелчка.

(См. Раздел взаимодействия на этой странице https://mermaidjs.github.io/flowchart.html)

Где мне нужно определить в моей разметке русалки, click A callback и A будут переданы в обратный вызов.

Проблема, с которой я столкнулся, заключается в том, что «обратный вызов» должен быть встроенной функцией javascript, а не функцией машинописного текста. Я нацелен на функцию «BoxClick» в моем ProjectManagementPageConnectionsComponent. И я вижу, что в main.bundle.js он скомпилирован примерно так: ProjectManagementPageConnectionsComponent.prototype.BoxClick = function () {

И при отладке в консоли я пытаюсь выполнить ProjectManagementPageConnectionComponent.BoxClick();, но он говорит, что ProjectManagementPageConnectionComponent не определен. но в main.bundle.js похоже, что он определен. Так есть ли над ним родительское пространство имен, которое мне не хватает? Поскольку я почти уверен, что смогу заставить эту функцию работать в консоли, я могу вызвать эту функцию и в моей разметке русалки.

В конце концов, я хочу, чтобы оттуда происходила навигация. Теперь, согласно документации русалки, я могу определить URL-адрес. И я сделал это, и это действительно работает; однако он открывается в новом окне. Я хочу, чтобы он перемещался в том же окне, и, похоже, единственный способ сделать это - использовать функцию. Но пространство имен функции кажется недостижимым.

ProjectManagementPageConnectionsComponent.prototype.BoxClick - это метод экземпляра, поэтому вам придется использовать new ProjectManagementPageConnectionComponent().BoxClick();. Я не говорю, что это ваша единственная проблема, просто это будет одна из них.
Daniel W Strimpel 18.04.2018 06:10

Мне это нравится, но я в консоли new ProjectManagementPageConnectionComponent().BoxClick(); по-прежнему говорит Uncaught ReferenceError: ProjectManagementPageConnectionComponent is not defined, который, читая все, что я могу, из файла main.bundle.js, просто не имеет никакого смысла, почему он скажет, что он не определен, потому что он выглядит четко определенным для меня.

Sean W. 18.04.2018 06:16

Вероятно, он находится в пределах IIFE или чего-то еще и, следовательно, не находится в глобальной области (также известной как свойство объекта окна).

Daniel W Strimpel 18.04.2018 06:18

Вероятно, вам придется создать функцию с глобальной областью видимости в своем классе TS, например window.handleBoxClick = function () {};.

Daniel W Strimpel 18.04.2018 06:26

Да, я вроде как сделал что-то в этом роде. Я пошел дальше и в папку с ресурсами добавил новый файл javascript. Затем я ввел его в index.html. Теперь функция принимает аргумент и просто выполняет грязный window.location.href для маршрута, который я хочу, и он работает нормально. кнопки назад тоже работают. Так что я чувствую себя хорошо. Я не знал, что могу создать функцию в пространстве имен окна в классе TS. Я тоже могу это попробовать. Спасибо за все.

Sean W. 18.04.2018 06:35

Я столкнулся с аналогичной проблемой. У кого-то это работало? Я пробовал с window.CustomFunction = function () {}; в классе TS, но это дает мне ошибку компиляции, например «ошибка TS1005: ';' ожидается. 69 window.CustomFunction = function () {}; "

user2030613 13.01.2021 10:11
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
6
425
0

Другие вопросы по теме