@acpaas-ui-widgets/ngx-location-picker-v1 中文文档教程

Question

Location Picker Smart Widget UI (Angular) - v1

重要的！ 这个包有几个版本。 我们引入这个版本的原因是为了在一个应用程序中使用多个版本，否则会相互冲突。 此（已弃用）版本的范围是 @acpaas-ui-widgets/ngx-location-picker-v1。 较新版本的范围是 @acpaas-ui-widgets/ngx-location-picker。 另请注意，模块的名称也已更改。

这是智能小部件的 Angular 6+ UI，它实现了一个选择器字段来选择一个位置（街道、地址或兴趣点）。 它与 相应的后端服务 匹配，在远程模式下运行时需要该服务。 提供了在安特卫普选择位置的默认实现。

有一个演示应用程序，请参阅下面的运行说明。

How to use

Installing

> npm install @acpaas-ui-widgets/ngx-location-picker-v1

Using

BFF 服务应该正在运行（请参阅下面的演示应用程序说明以了解如何启动一个）。

在您的模块中导入组件：

import { LocationPickerV1Module } from '@acpaas-ui-widgets/ngx-location-picker-v1';

@NgModule({
  imports: [
    ...,
    LocationPickerV1Module
  ],
  ...
})

在 index.html 中，包括核心品牌样式表：（

<link rel="stylesheet" href="https://cdn.antwerpen.be/core_branding_scss/4.1.1/main.min.css">

In your template:

<aui-location-picker-v1
    url="http://localhost:9999/api/locations"
    [(value)]="location">
</aui-location-picker-v1>

替换 BFF 服务的 url）

在组件代码中：

class YourComponent {

    // you can assign an initial value here
    location: LocationPickerV1Value;

    ...
}

支持列表中的每个值都必须有一个唯一的 ID。

Supported attributes

• url: the URL of the back-end service feeding this widget
• bufferInputMs: how long to buffer keystrokes before fetching remote results
• value: The current value of the picker, represented as a value object
• placeholder: specify the text to show in an empty field
• noDataMessage: the text shown in the list when there are no matching results

Events

• valueChange: triggers when the current value is changed (or cleared)

Protocol

后端服务实现以下协议：

• GET /path/to/endpoint?search=…&types=…
• search = the text that the user typed on which to match
• types = a comma-separated list of types to return, default value = "street,number,poi"
• result = JSON-encoded array of LocationPickerV1Value objects

Run the demo app

> npm install
> npm start

浏览到 localhost:4200

要使用位置选择器小部件，您还需要启动相应的后端- 结束服务。

Contributing

我们欢迎您的错误报告和拉取请求。

请参阅我们的贡献指南。

License

该项目根据 MIT 许可发布。