Question

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

我想为searchbox使用不同的组件，例如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',
        });
  }

提前致谢：）

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＆lt; string ＆gt;，因此该值可以是任何值。它应该是字符串。

在SearchComponent中，将使用$ event包含＆＃39;值＆＃39;来调用函数handleMenuInputInSearch($event)。（发出的值）

在Angular 2中的其他视图中添加Google Places SearchBox

1 个答案: