angular - 在 Angular 指令中包装 ngx-bootstrap/typeahead

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 进行绑定(bind)。看起来这个 $event 与 typeaheadOnSelect($event) 中的 ngx-bootstrap $event 结构不同。

我也不知道如何处理 (select)="mySelectFunction(???)"。你如何建议我可以使这个自动完成功能更可用于我的项目？

Answer 1

您需要在父组件中包含 typeahead 组件标签，并将值传递给使用 @Input 装饰器获取值的 typeahead 组件。我认为您需要了解 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>