angular - 创建可重用的 matAutocomplete 指令

Question

我想实现一个组件或指令以与 Angular Material 一起使用 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>