Google स्वत: पूर्ण स्थान कोणीय 2

Question

में बाल घटक में काम नहीं करता है, मैं Google places autocompletor के लिए Googleplace निर्देश का उपयोग कर रहा था। यह तब काम करता है जब मैं लिंक में दिखाए गए ऐपकंपोनेंट में इस निर्देश का उपयोग करता हूं लेकिन जब मैं इसे बच्चों के घटक में उपयोग करता हूं तो काम नहीं करता है।

app.routes.ts

import { provideRouter, RouterConfig } from '@angular/router'; 

import { BaseComponent } from './components/base/base.component'; 
import { DashboardComponent } from './components/dashboard/dashboard.component'; 


const routes: RouterConfig= 
    [ 
     {path:"",redirectTo:"/admin",pathMatch:'full'}, 

     {path:"admin",component:BaseComponent, 
      children:[ 
        { path: '', component: BaseComponent}, 
        { path: 'dashboard', component: DashboardComponent}, 
       ] 
     } 

    ]; 


export const appRouterProviders = [ 
    provideRouter(routes) 
]; 

main.ts

import {bootstrap} from '@angular/platform-browser-dynamic'; 
import {AppComponent} from './app.component'; 
import {appRouterProviders} from './app.routes'; 


bootstrap(AppComponent,[appRouterProviders]); 

app.component.ts

import {Component} from '@angular/core'; 
import {ROUTER_DIRECTIVES} from '@angular/router'; 


@Component({ 
    selector : 'my-app', 
    template: ` 
      <router-outlet></router-outlet> 
     ` , 
     directives:[ROUTER_DIRECTIVES] 
}) 
export class AppComponent { 

} 

base.component.ts

import {Component,OnInit} from '@angular/core'; 
import { provideRouter, RouterConfig,ROUTER_DIRECTIVES,Router } from '@angular/router'; 



@Component({ 
    selector: 'app-base', 
    templateUrl:"../app/components/base/base.html", 
    directives:[ROUTER_DIRECTIVES], 
    precompile:[] 

}) 



export class BaseComponent implements OnInit{ 

     constructor(private _router:Router){} 

     ngOnInit():any{ 

      this._router.navigate(["admin/dashboard"]); 
     } 
} 

base.html<router-outlet></router-outlet> है इसकी सामग्री है

dashboard.component.ts

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

import { provideRouter, RouterConfig,ROUTER_DIRECTIVES,Router } from '@angular/router'; 
import {GoogleplaceDirective} from './../../../directives/googleplace.directive'; 



@Component({ 
    selector: 'dashboard', 
    template:` 
     <input type="text" [(ngModel)] = "address" (setAddress) = "getAddress($event)" googleplace/> 
    `, 
    directives:[ROUTER_DIRECTIVES,GoogleplaceDirective] 
}) 

export class DashboardComponent implements OnInit{ 

     constructor(private _router:Router){} 

     ngOnInit():any{ 

      // this._router.navigate(["dashboard/business"]); 
     } 

     public address : Object; 
     getAddress(place:Object) {  
      this.address = place['formatted_address']; 
      var location = place['geometry']['location']; 
      var lat = location.lat(); 
      var lng = location.lng(); 
      console.log("Address Object", place); 
     } 
} 

googleplace.directive

import {Directive, ElementRef, EventEmitter, Output} from '@angular/core'; 
import {NgModel} from '@angular/common'; 

declare var google:any; 

@Directive({ 
    selector: '[googleplace]', 
    providers: [NgModel], 
    host: { 
    '(input)' : 'onInputChange()' 
    } 
}) 
export class GoogleplaceDirective { 
    @Output() setAddress: EventEmitter<any> = new EventEmitter(); 
    modelValue:any; 
    autocomplete:any; 
    private _el:HTMLElement; 


    constructor(el: ElementRef,private model:NgModel) { 
    this._el = el.nativeElement; 
    this.modelValue = this.model; 
    var input = this._el; 
    this.autocomplete = new google.maps.places.Autocomplete(input, {}); 
    google.maps.event.addListener(this.autocomplete, 'place_changed',()=> { 
     var place = this.autocomplete.getPlace(); 
     this.invokeEvent(place); 
    }); 
    } 

    invokeEvent(place:Object) { 
    this.setAddress.emit(place); 
    } 


    onInputChange() { 
    } 
} 

index.html

आउटपुट:

अद्यतन:

पाया गया कि, यह पूरी तरह से काम करता है जब वहाँ परियोजना में एक रूटर-आउटलेट टैग है, लेकिन विफल रहता है उपरोक्त उदाहरण के रूप में जब हम नेस्ट है रूटर-आउटलेट काम करने के लिए नेस्ट है रूटर-आउटलेट

Github link here

वहाँ निर्देश कोड से संबंधित कोई समस्या है एक घटक के बाल घटकों के साथ? कृपया मुझे बताएं कि मैं इस समस्या को कैसे हल कर सकता हूं।

Answer 1

समस्या https://maps.googleapis.com/maps/api/place/js/AutocompletionService.GetPredictions को एक एपीआई कुंजी की आवश्यकता होती है, जब आप इसे राउटर बच्चे के अंदर उपयोग करते हैं।

अनुक्रमणिका।एचटीएमएल

<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=places&sensor=false"></script> 

API_KEY के स्थान पर अपनी Google API कुंजी रखें।

मैं बाल घटक (कोई एपी कुंजी आवश्यक) और राउटर बच्चे (एपीआई कुंजी आवश्यक) के बीच व्यवहार में अंतर को समझा नहीं सकता।

गूगल मानचित्र एपीआई प्रलेखन के अनुसार, API कुंजी की आवश्यकता है:

https://developers.google.com/maps/documentation/javascript/places-autocomplete