Ballon Ymaps в Angular. Как правильно подписаться на события в BaloonContent?

Для подписки на события в BallonContent в Angular при использовании Yandex Maps API, вам необходимо выполнить следующие шаги:

1. Установить пакет @types/yandex-maps с помощью npm, чтобы иметь доступ к типам Yandex Maps API:

npm install @types/yandex-maps --save-dev

2. Создайте компонент Angular, в котором будет содержаться BallonContent. Давайте назовем его BallonContentComponent. В этом компоненте вы можете определить шаблон, который будет отображаться внутри Ballon. Например, вы можете определить следующий шаблон:

<div>
  <h1>{{title}}</h1>
  <p>{{description}}</p>
</div>

3. В BallonContentComponent создайте EventEmitter, который будет использоваться для отправки события при нажатии на кнопку внутри Balloon. Создайте метод onButtonClick, который будет вызываться при нажатии на кнопку, и внутри него вызовет EventEmitter:

import { Component, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-ballon-content',
  template: `
    <div>
      <h1>{{title}}</h1>
      <p>{{description}}</p>
      <button (click)="onButtonClick()">Click me</button>
    </div>
  `,
})
export class BallonContentComponent {
  @Output() buttonClick = new EventEmitter<void>();

  title = 'My Ballon Content';
  description = 'This is the content of the Balloon';

  onButtonClick() {
    this.buttonClick.emit();
  }
}

4. В основном компоненте Angular, который использует Yandex Maps и BallonContentComponent, подпишитесь на событие buttonClick BallonContentComponent и выполните нужные действия. Например:

import { Component } from '@angular/core';
import { BalloonContentComponent } from './ballon-content.component';

@Component({
  selector: 'app-root',
  template: `
    <ymap 
      [center]="[55.755814, 37.617635]"
      [zoom]="12"
      (ymapReady)="onYmapReady($event)"
    ></ymap>
  `,
})
export class AppComponent {
  onYmapReady(ymap: any) {
    const placemark = new ymaps.Placemark(
      [55.755814, 37.617635],
      {},
      {
        balloonContentLayout: ymaps.templateLayoutFactory.createClass(
          '<app-ballon-content></app-ballon-content>'
        ),
      }
    );

    ymap.geoObjects.add(placemark);

    const balloonContentComponent = placemark
      .balloon
      .getContentLayout()
      .getChildElement(0);

    balloonContentComponent.buttonClick.subscribe(() => {
      console.log('Button clicked');
      // Действия после нажатия кнопки внутри BalloonContent
    });
  }
}

В данном примере мы создаем новый Placemark с кастомным шаблоном balloonContentLayout, который ссылается на BallonContentComponent. Затем мы получаем экземпляр BallonContentComponent из balloonContentLayout и подписываемся на событие buttonClick, чтобы выполнить нужные действия после нажатия кнопки внутри BalloonContent.

Надеюсь, это поможет! Если у вас есть еще вопросы, не стесняйтесь задавать!