Google自动填充位置在Angular 2中的子组件中不起作用 [英] Google autocompleter place doesn't work in the Child Component in Angular 2

问题描述

我正在使用googleplace指令来

 从'@ angular / router'导入{provideRouter，RouterConfig}; 
 
从'./components/base/base.component'导入{BaseComponent};来自'./components/dashboard/dashboard.component'的
 import {DashboardComponent}; 
 
 
 const routes：RouterConfig = 
 [
 {path：，redirectTo：/ admin，pathMatch：'full'}，
 
 {路径：admin，组件：BaseComponent，
 children：[
 {path：''，component：BaseComponent}，
 {path：'dashboard'，component： DashboardComponent}，
] 
} 
 
]; 
 
 
 export const appRouterProviders = [
 provideRouter（routes）
]; 
  

main.ts

 从'@ angular / platform-b​​rowser-dynamic'导入{bootstrap};来自'./app.component'的
 import {AppComponent};来自'./app.routes'的
 import {appRouterProviders}; 
 
 
 bootstrap（AppComponent，[appRouterProviders]）; 
  

app.component.ts

 从'@ angular / core'导入{Component}; 
从'@ angular / router'导入{ROUTER_DIRECTIVES}; 
 
 
 @Component（{
选择器：'my-app'，
模板：`
< router-outlet>< / router- outlet> 
`，
指令：[ROUTER_DIRECTIVES] 
}）
导出类AppComponent {
 
} 
  

base.component.ts

 从'@ angular / core'导入{Component，OnInit};来自'@ angular / router'的
 import {provideRouter，RouterConfig，ROUTER_DIRECTIVES，Router}; 
 
 
 
 @Component（{
 selector：'app-base'，
 templateUrl：../ app / components / base / base。 html，
指令：[ROUTER_DIRECTIVES]，
预编译：[] 
 
}）
 
 
 
导出类BaseComponent implements OnInit {
 
 constructor（private _router：Router）{} 
 
 ngOnInit（）：any {
 
 this._router.navigate（[管理员/仪表板]）; 
} 
} 
  

base.html < router-outlet>< / router-outlet> 有其内容

dashboard.component .ts

  import {Component，来自'@ angular / core'的OnInit};来自'@ angular / router'的
 
 import {provideRouter，RouterConfig，ROUTER_DIRECTIVES，Router};来自'./../../../directives/googleplace.directive'的
 import {GoogleplaceDirective}; 
 
 
 
 @Component（{
选择器：'仪表板'，
模板：`
< input type =text[ （ngModel）] =地址（setAddress）=getAddress（$ event）googleplace /> 
`，
指令：[ROUTER_DIRECTIVES，GoogleplaceDirective] 
}）
 
导出类DashboardComponent实现OnInit {
 
构造函数（private _router：Router）{} 
 
 ngOnInit（）：任意{
 
 / / this._router.navigate（[dashboard / business]）; 
} 
 
公共地址：对象; 
 getAddress（place：Object）{
 this.address = place ['formatted_address']; 
 var location = place ['geometry'] ['location']; 
 var lat = location.lat（）; 
 var lng = location.lng（）; 
 console.log（地址对象，地点）; 
} 
} 
  

googleplace.directive

 从'@ angular / core'导入{Directive，ElementRef，EventEmitter，Output};来自'@ angular / common'的
 import {NgModel}; 
 
声明var google：any; 
 
 @Directive（{
选择器：'[googleplace]'，
提供商：[NgModel]，
主机：{
'（输入）' ：'onInputChange（）'
} 
}）
导出类GoogleplaceDirective {
 @Output（）setAddress：EventEmitter< any> = new EventEmitter（）; 
 modelValue：any; 
 autocomplete：any; 
 private _el：HTMLElement; 
 
 
构造函数（el：ElementRef，私有模型：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

输出

更新：

发现，当项目中有一个 router-outlet 标签
时，它可以正常工作，但是当我们嵌套路由器插座时无效，因为上面的示例已经嵌套路由器插座

Github链接

有没有我ssue与指令代码与组件的子组件？
请告诉我如何解决此问题。

解决方案

问题是 https ：//maps.googleapis.com/maps/api/place/js/AutocompletionService.GetPredictions 在路由器子项中使用时需要api密钥。

index.html

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

用你的谷歌API密钥代替API_KEY。

我无法解释子组件（无需api密钥）和路由器子（需要api密钥）之间的行为差​​异。

根据Google Map Api文档，API密钥是必需的：

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

I was using the googleplace directive for the Google places autocompletor. It works when I use this directive in AppComponent as shown in the link but doesn't work when I used it in the child Components.

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 has <router-outlet></router-outlet> has its content

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

Output:

Update:

Found that, it works perfectly when there is one router-outlet tag in the project, but fails to work when we have nested router-outlet as above example has nested router-outlet

Github link here

Is there any issue with directive code with child components of a component? Please let me know how I can resolve this issue.

解决方案

The issue is https://maps.googleapis.com/maps/api/place/js/AutocompletionService.GetPredictions require an api key, when you use it inside a router child.

index.html

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

Put your google API key in place of API_KEY.

I cannot explain the difference in behavior between child component(no api key needed) and router child(api key required).

According to Google Map Api documentation, API key is required:

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

这篇关于Google自动填充位置在Angular 2中的子组件中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！