来自Openlayers API的Angular Snackbar中的动态数据

Question

对于我的应用程序，我使用： 角度7.2 Openlayers 5.3

我要实现的是，当您将鼠标悬停在地图上时，鼠标位置的坐标将显示在小吃栏中。

我知道小吃栏并非旨在用于动态数据，但我认为在这里它会是一个很好的用途。

我的代码：

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

import { mapService } from '../services/map.service'
import { MatSnackBar } from '@angular/material';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss']
})
export class MapComponent implements OnInit {

  mousePosition: any = "Hover the map"

  constructor(
    public mapService: mapService,
    public snackBar: MatSnackBar
  ) { }

  ngOnInit() {
    this.mapService.initMap()
  }

  getMousePosition(){
    this.snackBar.openFromComponent(snackbarComponent)
  }

}


@Component({
  selector: 'snackbar',
  template: `{{ mousePosition }}`,
  styles: [``]
})
export class snackbarComponent implements OnInit {

  mousePosition: any

  constructor(
    private mapService: mapService
  ) { }

  ngOnInit(): void {
    this.mapService.map.on('pointermove', function(evt) {
      console.log(evt.coordinate)
      this.mousePosition = evt.coordinate
    }.bind(this))
   }
}

我裁掉了不必要的代码，因为我认为这没用，

This is the result I want but then to constantly change to you're mouse position

如何使小吃栏在不关闭的情况下进行自我更新？ Openlayers代码有效，但在小吃栏中不起作用，因为（我认为）小吃栏仅打开一次并粘贴此时获得的数据。