Question

我正在尝试使用我的选择器＆＃34; olmaps＆＃34;在同一个组件中多次，但它没有正常工作。
在应用程序中，每个地图都应该在他自己的窗口中加载。
但是地图只在第一个窗口中呈现。应该在第二个窗口中加载的第二个地图也会在第一个窗口中呈现。每个添加的地图都完全一样。
的 app.component.html

 <jqxWindow>
      <div id="windowHeader">
                    <span>
                        Different Maps
                    </span>
      </div>
      <div style="overflow: hidden;" id="windowContent">
        <jqxTabs>
          <ul style="margin-left: 30px;">
            <li>Map 1</li>
            <li>Map 2</li>
            <li>Map 3</li>
            <li>Map 4</li>
            <li>Map 5</li>
          </ul>

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

          <div>
            <olmap></olmap>

          </div>


          <div>

            <olmap></olmap>
          </div>

          <div>

            <olmap></olmap>

          <div>

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

map.component.html

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

map.component.ts

import {Component, OnInit, AfterViewInit, ElementRef, ViewChild, QueryList} from '@angular/core';

import * as ol from 'openlayers';

@Component({
  selector: 'olmap',
  host: {'[id]': 'mapId'},
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})



export class MapComponent implements OnInit {



 // id: string = ""  ;
  mapId: string;



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

  map: ol.Map = undefined;

  ngOnInit() {
    this.map = new ol.Map({

      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        })
      ],
      target: 'map',
      view: new ol.View({
        center: ol.proj.fromLonLat([50.7753, 6.0839]),
        zoom: 3
      })
    });
  }

}

也许这可以通过动态ID来解决，每次使用选择器时地图都会得到？但我没有在角度2/4丛林中找到任何解决方案......

Answer 1

对重复的任务使用ngFor：

 <ul>
     <li *ngFor="let i of [1,2,3,4,5]">
       Map {{i}}
       <olmap [mapId]="i"></olmap>
     </li>
<ul>

在组件中：

  @Input() mapId: number;

并过滤地图以获取每个olmap的mapId元素

如何在Angular 4中重复使用相同的选择器？

1 个答案: