再利用可能なmatAutocompleteディレクティブを作成する

Question

角材料autocomplete componentで使用するコンポーネントまたはディレクティブを実装したいと考えています。しかし、私はビジネスロジックをカプセル化し、入力要素を公開しながらそれを配線する方法を理解するのが難しいので、スタイルやアクセシビリティを追加するのは簡単です。

理想的には、私は入力に追加することができますが、<mat-autocomplete>コンポーネントをインスタンス化する必要があることを理解しておきたいと思います。したがって、<mat-option>リストをインスタンス化するコンポーネントを作成しようとしました。

@Component({ 
    selector: 'employee-search', 
    exportAs: 'employeeSearch', 
    template: ` 
    <mat-option *ngFor="let employee of employees | async" [value]="employee.globalId"> 
     <span> 
     <span>{{ employee.name }}</span> | 
     <small>{{ employee.globalId }}</small> 
     </span> 
    </mat-option> 
    `, 
}) 
export class EmployeeComponent implements OnInit { 
    control = new FormControl(); 
    employees: Observable<any[]>; 

    constructor(private rest: MyRestService) { } 

    ngOnInit() { 
    this.employees = this.control.valueChanges 
    .filter((value: string) => value && value.length >= 3) 
    .debounceTime(300) 
    switchMap((value: string) => this.loadEmployees(value)); 
    } 

    loadEmployees(searchInput: string): Observable<any[]> { 
    return this.rest.get('/employees', { filter: searchInput }); 
    } 
} 

私は<mat-autocomplete>コンポーネント内でこのコンポーネントを使用しようとしたのだが、データをロードするために、HTTP呼び出しを行うように見えるんが、オプションがロードされていません。

<mat-form-field> 
    <input matInput placeholder="Employee" aria-label="Employee" 
     [matAutocomplete]="auto" 
     [formControl]="employee.control"> 
</mat-form-field> 
<mat-autocomplete #auto="matAutocomplete"> 
    <employee-search #employee="employeeSearch"></employee-search> 
</mat-autocomplete> 

入力をカスタムオートコンプリートリストに表示するコンポーネントまたはディレクティブを作成するにはどうすればよいですか？

Answer 1

これは<mat-autocomplete>をラップして入力に渡すことで実装しました。私はコントロールとオートコンプリートのプロパティにアクセスすることができたテンプレート参照変数を使用して次に

@Component({ 
    selector: 'employee-search', 
    exportAs: 'employeeSearch', 
    template: ` 
    <mat-autocomplete> 
     <mat-option *ngFor="let employee of employees | async" [value]="employee.globalId"> 
     <span> 
      <span>{{ employee.name }}</span> | 
      <small>{{ employee.globalId }}</small> 
     </span> 
     </mat-option> 
    </mat-autocomplete> 
    `, 
}) 
export class EmployeeComponent implements OnInit { 
    control = new FormControl(); 
    employees: Observable<any[]>; 

    @ViewChild(MatAutocomplete) autocomplete: MatAutocomplete; 

    constructor(private rest: MyRestService) { } 

    ngOnInit() { 
    this.employees = this.control.valueChanges 
    .filter((value: string) => value && value.length >= 3) 
    .debounceTime(300) 
    switchMap((value: string) => this.loadEmployees(value)); 
    } 

    loadEmployees(searchInput: string): Observable<any[]> { 
    return this.rest.get('/employees', { filter: searchInput }); 
    } 
} 

。

<mat-form-field> 
    <input matInput placeholder="Employee" aria-label="Employee" 
     [matAutocomplete]="employee.autocomplete" 
     [formControl]="employee.control"> 
</mat-form-field> 
<employee-search #employee="employeeSearch"></employee-search>