Question

我必须为在Angular 4中获取地址/位置的文本输入实现自动完成。

我在Google上发现了这个包https://tanoy009.github.io/ng4-geoautocomplete/，但我不知道将example3的设置部分放在我自己的代码中。这就是我到目前为止所做的：

导出类TestComponent {

apiAddress: string = "";

@Output() notify: EventEmitter<any> = new EventEmitter<any>();

autoCompleteCallback1(selectedData: any) {


    this.apiAddress = selectedData.description;

    this.notify.emit(this.apiAddress);
}

Answer 1

您应该查看文档。它非常清楚。

https://github.com/tanoy009/ng4-geoautocomplete#installation

安装

通过npm安装：

npm install --save ng4-geoautocomplete Then include in your apps

模块：

import { Component, NgModule } from '@angular/core'; import {
Ng4GeoautocompleteModule } from 'ng4-geoautocomplete';

@NgModule({   
     imports: [
        Ng4GeoautocompleteModule.forRoot()   
     ] 
}) 
export class MyModule{}

在您的主文件中添加谷歌地方脚本＆＃39;的index.html＆＃39; （如果您想使用谷歌服务，则可选）。

<script type="text/javascript"
src="https://maps.google.com/maps/api/js?sensor=true&key=XXReplace
this with valid keyXX&libraries=places&language=en-US"></script>

最后在您的某个应用组件中使用：

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

@Component({   template: '<ng4geo-autocomplete
    (componentCallback)="autoCompleteCallback1($event)"></ng4geo-
    autocomplete>'
})

export class MyComponent {    
   autoCompleteCallback1(selectedData:any) {      
             //do any necessery stuff.    
   } 
}

更新：答案的下一部分是此处的更新，以回答评论部分中的问题。

以下链接显示您链接的演示的代码。这将告诉您放置设置的位置。您基本上在组件的打字稿文件中创建设置，然后在html中使用它们。

<强>打字稿

  public userSettings2: any = {
    showRecentSearch: false,
    geoCountryRestriction: ['in'],
    searchIconUrl: 'http://downloadicons.net/sites/default/files/identification-search-magnifying-glass-icon-73159.png'
  };

<强> HTML

<ng4geo-autocomplete [userSettings]="userSettings2" (componentCallback)="autoCompleteCallback2($event)"></ng4geo-autocomplete>

https://github.com/tanoy009/ng4-geoautocomplete/blob/master/demo/demo.component.ts

https://github.com/tanoy009/ng4-geoautocomplete/blob/master/demo/demo.component.html

我需要在哪里放置文档中的ng4-autocomplete'设置'代码？

1 个答案: