Googleプレイス検索ボックスを角度2の別のビューに追加

Question

私はサイドナビゲーションバーに角2を使ってGoogle検索ボックスを追加しようとしていました。 これは完了していないようです。

私は私が欲しい

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

内で定義されたマップのインスタンスを持っている別のコンポーネントmain.component.tsを持ってsearchBox.component.ts

のように私の検索ボックスに別のコンポーネントを使用したいです同じ地図を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', 
     }); 
    } 

感謝:)

Answer 1

コンポーネント間で対話するには、@Inputと@outputを使用する必要があります。 MenuComponentは中

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

、あなたは値が出で、何もすることができsearch.emit('value')

を呼び出す必要があります：あなたのHTMLは次のようになります

@Input() anyPropertyToPutInChild:string = ""; 


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

（この条件のために、一方が他方を含める必要があります）私たちがEventEmitterを定義して以来のケース< 文字列>文字列でなければなりません。

SearchComponentに機能handleMenuInputInSearch($event)が、それは場所をGoogleにまたはでメニューに定義された変数にアクセスするために関連して、私はあなたの質問を取得していない「の値」（放射された値）