Добавление GoogleLaces SearchBox в другом представлении в Angular 2

Question

Я пытался добавить поисковую систему google на боковой навигационной панели, используя Angular 2. Я не могу сделать это.

Я хочу использовать другой компонент для моего SearchBox как searchBox.component.ts

у меня есть еще один компонент main.component.ts который имеет экземпляр карты, определенный внутри

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

Мой вопрос заключается в том, как я могу получить доступ к переменной, определенной в карте menu.component.ts в search.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', 
     }); 
    } 

Заранее спасибо :)

Answer 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')

Значение может быть что угодно, в из случай, так как мы определили EventEmitter < string> он должен быть строкой.

в SearchComponent функция handleMenuInputInSearch($event) будет вызываться с $ событие, содержащее «значение» (значение испускается)