如何在@angular/google-maps infoWindow中显示动态内容

<div #mapContainer style="height: 400px;"></div>
<button (click)="openInfoWindow()">打开infoWindow</button>

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { MapInfoWindow, MapMarker } from '@angular/google-maps';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {
  @ViewChild('mapContainer') mapContainer: ElementRef;
  @ViewChild(MapInfoWindow) infoWindow: MapInfoWindow;

  markerOptions: google.maps.MarkerOptions = { draggable: true };
  markerPositions: google.maps.LatLngLiteral[] = [];
  infoContent: string;

  ngOnInit() {
    // 初始化地图
    const mapOptions: google.maps.MapOptions = {
      center: { lat: 40.730610, lng: -73.935242 },
      zoom: 8,
    };
    const map = new google.maps.Map(this.mapContainer.nativeElement, mapOptions);

    // 创建标记
    const marker = new google.maps.Marker({
      position: { lat: 40.730610, lng: -73.935242 },
      map,
      title: 'New York',
    });

    // 设置infoWindow的内容
    this.infoContent = '<h3>动态内容</h3><p>这是一个动态生成的infoWindow。</p>';

    // 监听标记的点击事件，打开infoWindow
    marker.addListener('click', () => {
      this.infoWindow.open(marker);
    });
  }

  openInfoWindow() {
    this.infoWindow.open();
  }
}

.gm-style-iw {
  background-color: #fff;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}