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

Question

Contact Picker Smart Widget UI (Angular)

这是智能小部件的 Angular 6+ UI，它实现了一个选择器字段以从联系人列表中选择一个人。 它与 相应的后端服务 匹配，在远程模式下运行时需要该服务。 提供了从 CRS Medewerker 选择人员的默认实现。

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

How to use

Installing

> npm install @acpaas-ui-widgets/ngx-contact-picker

Local mode

在这种模式下，支持选择器的数据是从周围的应用程序代码传递的，而不是从远程后端获取的。

在您的模块中导入组件：

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

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

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

对于仍在使用 Angular 5 的项目，我们是 维护一个 v1 分支，如果需要，该分支仍会收到错误修复。

> npm install @acpaas-ui-widgets/ngx-contact-picker@"<2.0.0"

In your template:

<label for="picker-1">Pick a person</label>
<aui-contact-picker
    data-id="picker-1"
    [data]="listOfPeople"
    [(value)]="person">
</aui-contact-picker>

在组件代码中：

class YourComponent {

    // you can assign an initial value here
    person: ContactPickerValue;

    listOfPeople: ContactPickerValue[] = [
        { id: '0', name: 'Abraham Ortelius', ... },
        ...
    ];

    ...
}

支持列表中的每个值都必须有一个唯一的 ID。 如果名称可以相同，建议使用如下所述的区分符。

Supported attributes

• id：联系人选择器的唯一 ID，以保证 WCAG 2.1 AA 合规性

• data：用作后备存储的值对象数组

• value： picker的当前值，表示为值对象

• placeholder：指定在空字段中显示的文本

• noDataMessage：没有匹配时列表中显示的文本results

• differentiator：支持值对象中的一个字段，显示为列表项右侧的标签，以帮助用户辨别多个匹配项之间的差异同名。

  

Events

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

Remote mode

在这种模式下，选择器由远程服务支持，该服务查询匹配用户类型的结果。

<label for="picker-2">Pick a person</label>
<aui-contact-picker
    data-id="picker-2"
    [(value)]="person"
    url="/api/people">
</aui-contact-picker>

Additional attributes

• url: the URL of the back-end service feeding this widget
• bufferInputMs: how long to buffer keystrokes before fetching remote results

支持服务实现以下协议：

• GET /path/to/endpoint?search=…
• search = the text that the user typed on which to match
• result = JSON-encoded array of ContactPickerValue objects

Run the demo app

> npm install
> npm start

浏览到 localhost:4200

要使用远程页面，您还需要启动相应的 后端服务。

Contributing

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

请参阅我们的贡献指南。

Support

Joeri Sebrechts (joeri.sebrechts@digipolis.be)

License

本项目根据MIT 许可<发布/a>。