Question

我在“userUpdate”表单组件上使用Google Maps Places Autocomplete 遵循此:http://brianflove.com/2016/10/18/angular-2-google-maps-places-autocomplete/

虽然我正在使用被动方法

我在http://localhost:4200/user/edit上执行f5后，一切正常路线。但是当从主页面进行路由时，我得到了这个：

Cannot read property 'nativeElement' of undefined

并且页面未加载。这是我的输入标签（参见#search）：

<input type="text"
  id="hometownCity"
  class="form-control form-control-lg mr-2"
  placeholder="search for location"
  autocorrect="off"
  autocapitalize="OFF"
  spellcheck="off"
  formControlName="city"
  #search>

在我班上

@ViewChild("search")
public searchElementRef: ElementRef;

onInit（或viewInit - 尝试过两者）：

this.mapsAPILoader.load().then(() => {
 let autocomplete = new 
  google.maps.places.Autocomplete(this.searchElementRef.nativeElement, {
          types: ["(cities)"]
        });
        autocomplete.addListener("place_changed", () => {
          this.ngZone.run(() => {
            //get the place result
            let place: google.maps.places.PlaceResult = autocomplete.getPlace();  
          });
        });
      });

我在this.searchElementRef.nativeElement

上收到错误

更新

添加了plunker example！

仅当路由到组件时，ElementRef才是未定义的

0 个答案: