Question

我想在不同的窗口中多次使用动态window.component中的map.component（我在同一个应用程序中通过点击事件得到多个动态窗口，里面有地图）。

window.component.html

<jqxWindow>
    <div>
        <olmap></olmap>
    </div>
<jqxWindow>

map.component.html

<div id="map" class="map" ></div>

map.component.ts

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

import * as ol from 'openlayers';

@Component({
  selector: 'olmap',
  templateUrl: './map.component.html',
  // template: '<div id={{mapId}}></div>',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {

  mapId: string = "";
  map: ol.Map = undefined;

  constructor() {
    this.mapId = "map";
  }

  ngOnInit() {

    this.map = new ol.Map({
      target: "map",
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        })
      ],
      view: new ol.View({
        center: ol.proj.fromLonLat([37.41, 8.82]),
        zoom: 4
      })
    });
  }
}

但只有在第一个窗口中才能渲染地图。第二个，第三个......窗口是空的。也许我需要为每个窗口创建一个新地图id或完全不同的解决方案？谢谢！

Answer 1

你是对的，你需要一个动态的用途，一个动态的map-id。在map.components.ts中，您可以为地图构建一个随机ID：

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

import * as ol from 'openlayers';

@Component({
  selector: 'olmap',
  templateUrl: './map.component.html',
  // template: '<div id={{mapId}}></div>',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {

  mapId: string = "";
  map: ol.Map = undefined;

  constructor() {
    this.mapId = "map" + Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5);
  }

  ngOnInit() {

    this.map = new ol.Map({
      target: "map",
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        })
      ],
      view: new ol.View({
        center: ol.proj.fromLonLat([37.41, 8.82]),
        zoom: 4
      })
    });
  }
}

你的map.component.html应如下所示：

<div  id={{mapId}} class="map"></div>

您还应该检查角度...中的2路数据绑定。

注入具有动态ID的组件以进行多次使用-Angular4

1 个答案: