Как связать Angular и яндекс карты?

Question

[Андрей]

Проблема заключается в том, что при добавлении в яндекс.карты не работает отслеживание изменений при событиях с яндекс.картами (например, клик по карте с определением координат, куда кликнули, с дальнейшим определением адреса).

Есть компонент, на нём есть карта и инпут для вывода адреса. При клике на карту происходит определение координат, геокодирование, изменяется модель, и ожидается, что в инпуте появится геокодированный адрес.
Судя по дебагу, всё происходит правильно вплоть до изменения модели, но в инпуте адрес не появляется (при этом если сделать focus/blur по инпуту, то адрес появится).
Вынос карты в отдельный компонент, и передача адреса через EventEmitter и emit не срабатывает - так же всё работает вплоть до изменения модели, но view не обновляется.

Почему такое может быть?

Comments

[Антон Швец]

обвязки пробовали? Например angular8-yandex-maps

первое что нашлось
Может все уже решали и решили

[Андрей]

Антон Швец, angular8-yandex-maps требует es2015, мне это не подходит) В целом вопрос уже решен

Answer 1

[Андрей]

Косяк в том, что привязанные к карте события

this.myMap.events.add('click' function(e){...}.bind(this))

выполнялись вне ангулара, и, хоть значение переменных изменялось, ангулар не производил ChangeDetection (и принудительный вызов
this.changeDetection.detectChanges()
так же не приводил к обновлению View.
И, как я уже писал, вынесение карты в отдельный компонент, а так же попытка хранить адрес внутри объекта, и попытка менять ссылку на объект, менять стратегию на OnPush - ничего не приводило к желаемому (кажется, от безысходности я перепробовал все возможные комбинации). То ли лыжи не едут, то ли со мной что-то не так)

Моё решение
1. Добавить в импорт и в конструктор ссылку на ngZone

import { ... NgZone ... } from '@angular/core';
constructor(... public zone: NgZone ...) { ... }

2. Выполнять функцию внутри клика внутри этой самой zone

this.myMap.events.add('click', function (e) {
  this.zone.run(() => {
... // <- всё что будет написано тут выполнится внутри ангулара и его контекста, и вызовет ожидаемое изменение view
}.bind(this));

Подробнее можно почитать в документации, на хабре, и вообще есть миллион статей на тему ngZone.

p.s. Angular 9.1.7, Yandex Maps на текущий момент 2.1.79

Answer 2

[Джанго Всемогущий]

По первым признакам модель не подвязана корректно в инпуте. Необходимо указать ([ngModel])="вашаМодельВТайскрипте"

Comments

[Андрей]

А есть разница в каком порядке круглые и квадратные скобки? Я обычно пишу [(ngModel)], и в этом случае было написано так же