角度指令で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"}, ...] 

を私のコンポーネントのコードは、オートコンプリートを使用しているコンポーネントに属していないと思います。それはそれほど再利用できません。

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

：私は、私は私の自動補完を使用するたびに、私は次のようにそれを使用するディレクティブを作成すると思ってコンポーネント内のすべてのこれらのコードを持つようにしたいと、これらすべての(blur)="typeaheadOnBlur()"、typeaheadWaitMs="300"はありませんご存じのように、viewModel.nestedProperty.countryをngx-bootstrapとのバインディングに使用できませんでした。この$eventは、typeaheadOnSelect($event)のngx-bootstrap $eventとは異なる構造を持つように見えます。

また、(select)="mySelectFunction(???)"の処理方法もわかりません。自分のプロジェクトでこのオートコンプリートをもっと再利用できるようにするにはどうすればよいですか？

Answer 1

親コンポーネントに先行コンポーネントタグを組み込み、@Inputデコレータを使用して値を取得する先入れ先出しコンポーネントに値を渡す必要があります。コンポーネント自体が設計されているため、角型コンポーネントの一般的な動作を知る必要があると思います。簡単に再利用できるようにします。

先行入力コンポーネント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"> 

先行入力は

@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> 

のコンポーネント -