A
A
Andrew2021-08-15 00:53:01
Angular
Andrew, 2021-08-15 00:53:01

How to connect Angular and Yandex maps?

The problem is that when adding to Yandex.maps, tracking changes does not work for events with Yandex.maps (for example, clicking on the map with determining the coordinates where you clicked, with further determining the address).

There is a component, it has a map and an input for displaying the address. When you click on the map, coordinates are determined, geocoded, the model changes, and it is expected that a geocoded address will appear in the input.
Judging by the debug, everything is going right until the model is changed, but the address does not appear in the input (and if you focus / blur on the input, the address will appear).
Removing the map into a separate component, and passing the address through the EventEmitter and emit does not work - everything works the same way until the model changes, but the view is not updated.

Why can this be?

Answer the question

In order to leave comments, you need to log in

2 answer(s)
A
Andrew, 2021-08-16
@byte916

The jamb is that the events tied to the map

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

were executed outside of Angular, and although the value of the variables changed, Angular did not produce a ChangeDetection (and the forced call
this.changeDetection.detectChanges()
also did not update the View.
And, as I already wrote, putting the map in a separate component, as well as trying to store the address inside the object, and an attempt to change the link to the object, change the strategy to OnPush - nothing led to the desired (it seems that I tried all possible combinations out of hopelessness. Either the skis do not go, or something is wrong with me)
My solution
1. Add to import and in the constructor a link to ngZone
import { ... NgZone ... } from '@angular/core';
constructor(... public zone: NgZone ...) { ... }

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

You can read more in the documentation , on Habré , and in general there are a million articles on the topic of ngZone.
ps Angular 9.1.7, Yandex Maps is currently 2.1.79

D
Django Almighty, 2021-08-15
@12345678XYU87654321

According to the first signs, the model is not tied up correctly in the input. You must specify ([ngModel])="yourModelInTyscript"

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question