在离子 4 中集成谷歌地图时出错

Question

我正在尝试将谷歌地图集成到离子4应用程序中，不幸的是面临nativeElement未找到错误。

@ViewChild('Map'( mapElement： ElementRef; ~~~~~~~~~~~~~~~~

node_modules/@angular/核心/核心.d.ts：8436：47 8436(选择器：类型 |功能 |字符串，选项：{ ~~~~~~~ 8437 读？： 任何; ~~~~~~~~~~~~~~~~~~~ 8438静态：布尔值; ~~~~~~~~~~~~~~~~~~~~~~~~ 8439 }(：任意; ~~~~~ 没有提供"选择"的论据。 系统控制台 。

首页

import {Component, ElementRef, NgZone, ViewChild, OnInit} from '@angular/core';
import {Geolocation} from '@ionic-native/geolocation/ngx';
declare var google: any;
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
@ViewChild('Map') mapElement: ElementRef;
map: any;
mapOptions: any;
location = {lat: null, lng: null};
markerOptions: any = {position: null, map: null, title: null};
marker: any;
apiKey: any = 'API_KEY'; 
constructor(public zone: NgZone, public geolocation: Geolocation) {
/*load google map script dynamically */
const script = document.createElement('script');
script.id = 'googleMap';
if (this.apiKey) {
script.src = 'https://maps.googleapis.com/maps/api/js?key=' + this.apiKey;
} else {
script.src = 'https://maps.googleapis.com/maps/api/js?key=';
}
document.head.appendChild(script);
/*Get Current location*/
this.geolocation.getCurrentPosition().then((position) =>  {
this.location.lat = position.coords.latitude;
this.location.lng = position.coords.longitude;
});
/*Map options*/
this.mapOptions = {
center: this.location,
zoom: 21,
mapTypeControl: false
};
setTimeout(() => {
this.map = new google.maps.Map(this.mapElement.nativeElement, this.mapOptions);
/*Marker Options*/
this.markerOptions.position = this.location;
this.markerOptions.map = this.map;
this.markerOptions.title = 'My Location';
this.marker = new google.maps.Marker(this.markerOptions);
}, 3000);
}
}

Answer 1

如果你有需要在调用 ngAfterVewInit 钩子之前访问视图查询结果的情况，我们可以将 static 设置为 true。但是，设置为 true 允许访问来自 ngOnInit 生命周期的视图查询结果。

最新版本 角度， @ViewChild 有 2 个参数

@ViewChild(‘Map’, {static: true}) mapElement: ElementRef;

Answer 2

较新版本的 Angular 要求您提供一个对象作为@ViewChild装饰器 (docs( 的第二个参数。该对象需要具有static的布尔值。

// {static: boolean}
@ViewChild('Map', {static: false) mapElement: ElementRef;

决定static应该是真还是假取决于您是否在模板中动态呈现元素，例如*ngIf或*ngFor。如果不使用这些(或任何其他结构指令(，则应将static设置为 false，以便可以尽快访问该元素。

说到何时可以访问元素引用，组件构造函数中有很多逻辑。强烈建议您将其移出构造函数并移入生命周期挂钩。您绝对需要将引用mapElement的任何代码移出构造函数，因为它在那里总是未定义的(这可能就是您使用setTimeout的原因？ElementRefs with{static:false}将在ngOnInit中提供，而ElementRefs with{static:true}将在ngAfterViewInit中提供。

由于您使用的是 Ionic，因此查看它们的生命周期钩子对您也有好处。