angular - 开放层 5 | Angular 7 |棱 Angular Material | map 在 Angular Material 垫步进器内不起作用

Question

我在我的组件 ts 文件中导入了 OpenLayers map ，然后我创建了一个 id = map 的 div block ，其中必须显示 OpenLayers map ，但它没有。当我将 div block (#map) 移到 mat-stepper block 之外时，它就可以工作了。

组件.ts:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

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-sell',
  templateUrl: './sell.component.html',
  styleUrls: ['./sell.component.scss'],
})
export class SellComponent implements OnInit {
  ...

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

  ...

  ngOnInit() {
    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:

<mat-horizontal-stepper
  linear
  labelPosition="bottom"
  #stepper
  class="sell-form-container"
>
  <mat-step ...>
    <form ...>
      ...
      <div id="map"></div>  //<- here it does not work, map does not display
      ...
    </form>
  </mat-step>
  ...
</mat-horizontal-stepper>
<div id="map"></div> //<- here it works, map displays

组件.css:

#map {
  width: 100%;
  height: 500px;
}

我的代码有什么问题？

Answer 1

我认为您的问题与您尝试将 OLMap 附加到 mat-stepper 或 mat-step 的嵌入内容中的内容有关。

在组件生命周期中，子组件在父组件的 OnInit 阶段还没有准备好。因为您将所需的 div 放在 mat 组件中，所以它被包含在该组件的生命周期中。

解决此问题的一种方法是使用 ngAfterViewInit 生命周期方法。在该方法中使用您的代码应该可以解决此问题。

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

---

出于潜在的好奇心，我还想介绍另一种使用组件的方法。留意嵌入的内容，如果你想要的元素在当前组件中，你应该使用 ViewChild 装饰器来选择它。否则，如果它在子组件中，请使用 ContentChild 装饰器。

// html
<mat-horizontal-stepper ...>
  <mat-step ...>
    <form ...>
      ...
      <div #myMapRef id="map"></div>
      ...
    </form>
  </mat-step>
  ...
</mat-horizontal-stepper>

// parent ts
@ContentChild('myMapRef') // <-- if it's in a child component, your case should use this
@ViewChild('myMapRef') // <-- if it's in this component, your "this is working" would use this
myMap: ElementRef;

ngAfterViewInit() {
  console.log(this.myMap); // can get the ID from the ElementRef
}

我强烈建议您实际熟悉组件生命周期的深度。这是我希望在学习 Angular 时早点做的一件事。

• Angular Lifecycle Methods
• Angular ContentChild
• Angular ViewChild
• A long example blog post
• After Content Example
• After View Example