在角度7

Question

我对angular 7还是陌生的，我试图在我的angular 7站点上设置openlayers。 我已经尝试了一些在网络上看到的示例，但仍然无法正常工作。

我在控制台上没有出现错误，但是地图没有显示，我在角度方面没有太多经验，但是在我看来MapComponent类没有开始，您能帮我吗？ / p>

这是我的代码

import { Component, OnInit } from '@angular/core';
import OlMap from 'ol/Map';
import OlXYZ from 'ol/source/XYZ';
import OlTileLayer from 'ol/layer/Tile';
import OlView from 'ol/View';

import { fromLonLat } from 'ol/proj';
@Component({
  selector: 'app-map',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'protCivil';
}

export class MapComponent implements OnInit {

  map: OlMap;
  source: OlXYZ;
  layer: OlTileLayer;
  view: OlView;

  ngOnInit() {
    console.log('stt');
    this.source = new OlXYZ({
      url: 'http://tile.osm.org/{z}/{x}/{y}.png'
    });

    this.layer = new OlTileLayer({
      source: this.source
    });

    this.view = new OlView({
      center: fromLonLat([6.661594, 50.433237]),
      zoom: 3
    });

    this.map = new OlMap({
      target: 'map',
      layers: [this.layer],
      view: this.view
    });

  }
}

和我的html

<div id="barraTop">
  <div class="logo">

  </div>
  <div>
    <h1>Protecção Cívil - Dashboard</h1>
  </div>
</div>
<div class="containerAPP">
  <div id="map" class="map">
  </div>
  <div id="ocurrencias" >
    <div class="itemOcorrencias">
      <div>topico</div>
    </div>
  </div>
  <div id="descricao"></div>




  </div> 

和CSS

.containerAPP
{
    width:100%;
    height:86vh;
    display:flex;
    flex-wrap:wrap;
    justify-content: space-evenly;
    align-content: space-around;

}

.map
{
    width:48.5%;
    height:49%;

}
#ocurrencias
{
    width:48.5%;
    height:49%;

    overflow-y:scroll;
}
.itemOcorrencias
{
    height:10%;display:flex;align-items:center;
    padding-left:3%;
    border-bottom:1px solid black;
}
#descricao
{
    width:98%;
    height:45%;

}