Angular 在离子4中集成google地图时出错

我正在尝试将google地图集成到ionic 4应用程序中，不幸的是遇到了nativeElement not found错误

@ViewChild'Map'mapElement:ElementRef； ~~~~~~~~~~~~~~~~

节点模块/@angular/core/core.d.ts:8436:47 8436选择器：类型|函数|字符串，选项：{ ~~~~~~~ 8437读？：任何； ~~~~~~~~~~~~~~~~~~~ 8438静态：布尔型； ~~~~~~~~~~~~~~~~~~~~~~~~ 8439}：任何； ~~~~~ 未提供“opts”的参数。 系统控制台

home.page.ts

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);
  }

}

---

如果需要在调用ngAfterVewInit钩子之前访问视图查询结果，则可以将static设置为true。但是，如果设置为true，则允许访问Ngonit生命周期中的视图查询结果

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

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

---

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

判断ifstatic是否为真取决于是否在模板中动态呈现元素，如*ngIf或*ngFor。如果未使用这些或任何其他结构指令，则应将static设置为false，以便尽快访问元素

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

---

由于您使用的是Ionic，因此您也可以查看一下。

请解释您的答案将如何帮助解决问题，并且不要只给出代码答案而没有上下文。这无法解决问题-错误在@ViewChild'Map'，{static:true}mapElement:ElementRef；-错误-var-Map:MapConstructor无效字符。ts1127无效字符。这无法解决问题-错误在@ViewChild'Map'，{static:true}mapElement:ElementRef；-错误-var-Map:MapConstructor无效字符。ts1127无效字符。此答案解决了原始问题中的错误。您可以在帖子中提供更多信息，也可以就这个新错误提出新问题。听起来像是语法错误

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