AngularJS到角指令轉換

Question

我有這個指令在AngularJS現在我想將其轉換成角：

angular.module('mobApp.services'). 
    directive('googlePlaces', function(ShareObjectService){ 
    var googlePlaceComponents = { 
     street_number: 'short_name', 
     route: 'long_name', 
     locality: 'long_name', 
     administrative_area_level_1: 'long_name', 
     sublocality_level_2: 'long_name', 
     country: 'long_name', 
     postal_code: 'short_name', 
     sublocality_level_1: 'long_name' 
    };   
    return { 
     restrict:'E', 
     replace:true, 
     template: '<input id="google_places_ac" name="google_places_ac" type="text" class="input-block-level"/>', 
     link: function(scope, elm, attrs){ 
      var autocomplete = new google.maps.places.Autocomplete($("#google_places_ac")[0], {}); 
      google.maps.event.addListener(autocomplete, 'place_changed', function() { 
       var place = autocomplete.getPlace(); 
       // console.log(place.formatted_address); 
       console.log(JSON.stringify(place)); 
       var addressObject = {}; 
       addressObject['formatted_address'] = place.formatted_address; 
       addressObject['lat'] = place.geometry.location.lat(); 
       addressObject['lng'] = place.geometry.location.lng(); 
       for (var i = 0; i < place.address_components.length; i++) { 
       var addressType = place.address_components[i].types[0]; 
       if (googlePlaceComponents[addressType]) { 
        addressObject[addressType] = place.address_components[i][googlePlaceComponents[addressType]]; 
       } 
       } 
       ShareObjectService.setGooglePlace(addressObject); 
      }); 
     } 
    } 
}); 

，我用它喜歡：

<google-places location=location></google-places> 

我怎麼能這個整體轉換東西變成Angular？

Answer 1

您需要爲此創建一個組件類。如下所示：

@Component({ 
    selector: 'googlePlaces', 
    template: '<input id="google_places_ac" name="google_places_ac" type="text" #googlePlacesAc class="input-block-level"/>', 
    providers: [ ShareObjectService ] 
}) 
export class GooglePlacesComponent { 
    constructor(private service: ShareObjectService, @Query('googlePlacesAc') inputElts:QueryList<ElementRef>) { 
    this.inputElt = inputElts.first; 
    } 

    ngOnInit() { 
    var googlePlaceComponents = { 
     street_number: 'short_name', 
     route: 'long_name', 
     locality: 'long_name', 
     administrative_area_level_1: 'long_name', 
     sublocality_level_2: 'long_name', 
     country: 'long_name', 
     postal_code: 'short_name', 
     sublocality_level_1: 'long_name' 
    };   

    var autocomplete = new google.maps.places.Autocomplete(this.inputElt.nativeElement, {}); 
      google.maps.event.addListener(autocomplete, 'place_changed',() =>{ 
       var place = autocomplete.getPlace(); 
       // console.log(place.formatted_address); 
       console.log(JSON.stringify(place)); 
       var addressObject = {}; 
       addressObject['formatted_address'] = place.formatted_address; 
       addressObject['lat'] = place.geometry.location.lat(); 
       addressObject['lng'] = place.geometry.location.lng(); 
       for (var i = 0; i < place.address_components.length; i++) { 
       var addressType = place.address_components[i].types[0]; 
       if (googlePlaceComponents[addressType]) { 
        addressObject[addressType] = place.address_components[i][googlePlaceComponents[addressType]]; 
       } 
       } 
       ShareObjectService.setGooglePlace(addressObject); 
      }); 
     } 
    } 
}