angular 方法在组件中有效，但在对话框中无效

Question

已更新以包含完整的对话代码。

我有一个带有 mapbox-gl 地图对象的 angular 应用程序。我想将地图的图层设置为hidden/visible。在创建地图的组件中，定义了 map.setLayoutProperty() 函数，它就像一个魅力。但是，我想在对话框中切换图层 on/off。在对话框中，地图对象毫无问题地传入，但是当我尝试使用 setLayoutProperty() 函数切换图层时，出现运行时错误，告诉我函数未定义。在地图组件中的使用效果很好：

    this._mapRef.setLayoutProperty( 'satellite-street', 'visibility', 'none');

在地图组件中创建对话框的位置：

  layerControl() {
    const dialogConfig = new MatDialogConfig();

    dialogConfig.disableClose = true;
    dialogConfig.autoFocus = true;
    dialogConfig.panelClass = 'layer-control-dialog';
    dialogConfig.position = { top: '0',
                              right: '20' };
    dialogConfig.data = {
      map: this._mapRef
    };

    const dialogRef =     this.layerControlDialogComponent.open(LayerControlDialogComponent, dialogConfig);
    dialogRef.afterClosed().subscribe(
      data => {

        console.log('Dialog output: ', data.controls.acMgrName.touched )
      });

  }

对话框中通过构造函数传入map的地方：

import { Component, Inject, OnInit } from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material';
import { LngLat, Layer, Map } from 'mapbox-gl';


@Component({
  selector: 'app-layer-control',
  templateUrl: './layer-control-dialog.component.html',
  styleUrls: ['./layer-control-dialog.component.scss']
})
export class LayerControlDialogComponent implements OnInit {
  _layers = {
    markerLayer: true,
    polyLayer: true,
    satLayer: false,
    IFRLayer: false,
    VFRLayer: false,
    airspaceLayer: false
  }
  _map: Map;
  visibility = '';

  constructor(public dialogRef: MatDialogRef<LayerControlDialogComponent>,
               @Inject(MAT_DIALOG_DATA) map: Map) {
                 console.log('layer control dialog, map=', map);
                 this._map = map;
               }

  ngOnInit() {
  }

  onSatShowToggle(e) {
    this._layers.satLayer = e.checked === true ? true : false;
    this.visibility = this._layers.satLayer === true ? 'visible' : 'none';
    console.log('this._map=', this._map);
    this._map.setLayoutProperty( 'satellite-street',
                                  'visibility',
                                  this.visibility);
  }
  onMarkerShowToggle(e) {
    this._layers.markerLayer = e.checked === true ? true : false;
  }
  onPolyShowToggle(e) {
    this._layers.polyLayer = e.checked === true ? true : false;
  }
  onRadioGroupToggle(e) {
    switch (e.value) {
      case 'vfrLayer':  this._layers.VFRLayer = true;
                        this._layers.IFRLayer = false;
                        this._layers.airspaceLayer = false;
                        break;
      case 'ifrLayer':  this._layers.VFRLayer = false;
                        this._layers.IFRLayer = true;
                        this._layers.airspaceLayer = false;
                        break;
      case 'airspaceLayer': this._layers.VFRLayer = false;
                        this._layers.IFRLayer = false;
                        this._layers.airspaceLayer = true;
                        break;
    }
  }

  close(e) {
    this.dialogRef.close();
  }
}

最后，运行时错误：我有相同的导入，已验证地图对象正在传递到对话框中。我错过了什么？

谢谢....

Answer 1

结束了对话框 select 图层到 display/hide，然后 return 每个图层的状态返回到地图组件。然后根据对话框中的 return 映射组件 shows/hides 层。似乎是一种迂回的做事方式，但它确实有效！

angular 方法在组件中有效，但在对话框中无效

angular method works in component but not dialog

angular

mapbox-gl