Question

我正在使用ngx-bootstrap / typeahead在我的页面中拥有自动填充功能。这是我目前正在使用的代码：

<input type="text" class="form-control" name="countryName" autocomplete="off" [(ngModel)]="asyncSelected" (blur)="typeaheadOnBlur()" [typeahead]="countryDataSource" (typeaheadOnSelect)="typeaheadOnSelect($event)" typeaheadWaitMs="300" typeaheadOptionField="name">

组件：

asyncSelected: string;

constructor() {
    this.countryDataSource = Observable.create((observer: any) => {
        observer.next(this.asyncSelected);
    }).mergeMap((input: string) => this.getAutoCompleteResults(input));
}

typeaheadOnSelect(event: TypeaheadMatch): void {
    viewModel.nestedProperty.country = event.item.name;
    viewModel.nestedProperty.countryCode = event.item.countryCode;
}

typeaheadOnBlur(): void {
    viewModel.nestedProperty.country = asyncSelected;
}

getAutoCompleteResults()以下列格式返回一个对象数组（可观察）：

[{id: 1, name: "Australia", code: "AU"}, {id: 2, name: "United States", code: "US"}, ...]

现在，我认为我的组件中的代码不属于仅使用自动完成的组件。它也不会使它重复使用。我不想在组件中包含所有这些代码以及所有(blur)="typeaheadOnBlur()"，typeaheadWaitMs="300"每次我想要使用我的自动完成时我想要创建一个指令来使用它如下：

<input [myAutoComplete] [ngModel]="viewModel.nestedProperty?.country" (NgModelChange)="viewModel.nestedProperty.country=$event" (select)="mySelectFunction(???)" />

您可能已经注意到，我无法使用viewModel.nestedProperty.country来绑定ngx-bootstrap。看起来这个$event与$event中的ngx-bootstrap typeaheadOnSelect($event)具有不同的结构。

我也不知道如何处理(select)="mySelectFunction(???)"。您如何建议我可以将此自动填充功能更可重复用于我的项目？

Answer 1

您需要在父组件中包含typeahead组件标记，并将值传递给typeahead组件，该组件使用@Input装饰器获取值。我认为您需要知道Angular组件的工作原理，作为组件本身设计的方式使其可以轻松重复使用。

Typeahead组件HTML -

<input [id]="id" [(ngModel)]="_model" [typeahead]="workflows" (typeaheadLoading)="changeTypeaheadLoading($event)" 
(typeaheadNoResults)="TypeaheadNoResults($event)" (typeaheadOnBlur)="onBlurFunction($event)"
 [typeaheadMinLength]="MinLength" [typeaheadOptionsLimit]="OptionsLimit"
 [typeaheadOptionField]="OptionsField" [optionsListTemplate]="customListTemplate">

Typeahead组件 -

@Component({
selector: 'app-input-typeahead',
templateUrl: './input-typeahead.component.html',
})
export class InputTypeaheadComponent{
@Input() selected: any;
@Input() workflows: any;
...
@Input() callback: Function;   
...}

父组件

<app-input-typeahead name="requestTypeahead" [id]="workflowId" 
[label]="workflowLabel" [(ngModel)]="selectedWorkflow" [workflows]="requestMatrixList"
[OptionsField]="optionsField"[OptionsLimit]="optionsLimit" [MinLength]="minLength"
[customListTemplate]="customListTemplate" [customItemTemplate]="customItemTemplate"
[placeholder]="placeholder" [callback]="onTypeaheadHandler"></app-input-typeahead>

Answer 2

您可以扩展指令TypeaheadDirective本身，并在其中设置所需的默认值。看看这个要点：https://gist.github.com/francarmona/9e7d373e80e9cc9afb9c023923093c01

在Angular Directive中包含ngx-bootstrap / typeahead

2 个答案: