在 Angular 2 的不同视图中添加 Google Places SearchBox答案

【问题标题】：Adding a Google Places SearchBox in a different View in Angular 2在 Angular 2 的不同视图中添加 Google Places SearchBox
【发布时间】：2017-02-01 07:07:09
【问题描述】：

我试图使用 Angular 2 在侧导航栏上添加一个谷歌搜索框。我似乎无法完成这件事。

我想为我的搜索框使用不同的组件，例如 searchBox.component.ts

我有另一个组件 main.component.ts，其中定义了一个 map 实例

<div id="mapDiv" ></div>

我想在 searchbox.component.ts 中使用同一张地图，这样我就可以搜索地点并在同一张地图上添加标记。我怎样才能做到这一点？

search.componnt.ts：

    import { Component,Output,EventEmitter,OnInit } from '@angular/core';



@Component({
    selector:'searchBox',
    templateUrl:'searchBox.component.html',
    styleUrls:['searchBox.component.css'],
})


declare var google: any;


export class searchBoxComponent implements OnInit{



    @Output() searchGeoCode :EventEmitter<any> = new EventEmitter();
    @Output() closeButtonClicked: EventEmitter<any> = new EventEmitter();
    input:any;
    searchBox:any;





    ngOnInit():void {
        let self= this;
        this.input = document.getElementById("pac-input");
        this.searchBox = new google.maps.places.Autocomplete(self.input);
        this.searchBox.addListener('place_changed', function(){
          self.onSearchResultSelect(self);
        });
    }
    onSearchResultSelect(self:any) {
        let place:any;
        self.places = self.searchBox.getPlace();
        if (self.places == "") {
                return;
        }

        place = self.places;

        self.map.setCenter(place.geometry.location);

        self.searchedGeocode=this.map.getCenter().lat() + "," + this.map.getCenter().lng();
        let icon = {
            url: "./images/officeMarker.svg",
            scaledSize: new google.maps.Size(30,30),
        };
        self.markernew=new google.maps.Marker({
            position: place.geometry.location,
            map: self.map,
            icon: icon,
            title: 'Current Marked Location'    
        });
    }
    OnClick() {
        this.input.value='';
        this.input.focus();
    }
}

我的问题是如何访问 search.component.ts 中 menu.component.ts 中定义的地图变量？

menu.component.ts ：

      initMap(){
   this.map = new google.maps.Map(document.getElementById('map'), {
          zoom: this.zoom,
          center: {lat: this.lat, lng: this.lng},
          zoomControlOptions: {
          position: google.maps.ControlPosition.LEFT
            },
          mapTypeControl:false,
          streetViewControl:false,
          scrollWheelZoom : 'center',
        });
  }

在此先感谢 :)

【问题讨论】：

我没听懂你的问题，它与谷歌地方有关还是访问搜索组件菜单中定义的变量？
@DanyY 谢谢你的回复。我想从 search.component.ts 访问 menu.component.ts 中定义的变量

标签： angular google-maps-api-3

【解决方案1】：

要在组件之间进行交互，您应该使用@Input 和@Output。（对于这种情况，一个应该包含另一个）

  @Input() anyPropertyToPutInChild:string = "";


  @Output() search:EventEmitter<string> = new EventEmitter<string>();

你的 html 会是这样的：

    <search-component>
     <menu-component [anyPropertyToPutInChild]="value"  (search)="handleMenuInputInSearch($event)"></menu-component>
</search-component>

在 menuComponent 中，你应该调用search.emit('value')

值可以是任何值，万一因为我们定义了 EventEmitterstring> 它应该是字符串。

在 SearchComponent 中，函数 handleMenuInputInSearch($event) 将使用包含“值”（发出的值）的 $event 调用

【讨论】：