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

【问题标题】：Where do I need to place the ng4-autocomplete 'settings' code from the documentation?我需要在哪里放置文档中的 ng4-autocomplete 'settings' 代码？
【发布时间】：2017-11-21 12:08:19
【问题描述】：

我必须为在 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);
}

【问题讨论】：

标签： html angular typescript

【解决方案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{}

在您的主文件中添加 google place 脚本，通常称为 'index.html'（如果你想使用谷歌服务，可选）。

<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.    
   } 
}

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

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

TypeScript

  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

【讨论】：

是的，我拥有所有这些东西并得到了输出。但我需要使用这个对象。{ "showCurrentLocation":false, "resOnSearchButtonClickOnly":true, "inputPlaceholderText":"这是延迟测试", "recentStorageName":"componentData3", "inputString":"Bangalore, karnataka" } .我需要把这段代码放在哪里。
请告诉我在哪里放置链接中给出的设置。
请通过在回调中实现发送一些代码示例。我已经尝试了很多方法。但没有得到结果。
我已更新答案以反映您的进一步问题。
@Nick - 检查这个问题：stackoverflow.com/questions/46268259/…