我正在使用 Angular Material 的垫自动完成 https://material.angular.io/components/autocomplete/overview组件，并根据docs https://material.angular.io/components/autocomplete/api#MatAutocompleteTrigger，有一种方法可以使用 openPanel()/closePanel() 方法打开/关闭自动完成面板。关于如何将其集成到已经工作的示例中，有什么建议吗？

这是我所做的在尝试实现该功能时。

材料文档应该更清晰。虽然您可以通过多种方式来实现此功能（例如操作文档对象、使用 @ViewChild 或创建事件侦听器），但对我来说，它可以归结为以下两种方式：

1 极简主义：

<mat-form-field>
    <input #nameInput
           matInput
           formControlName="name"
           #trigger="matAutocompleteTrigger"  
           [matAutocomplete]="autoName">

    <mat-autocomplete #autoName="matAutocomplete">

        <mat-option *ngFor="let o of suggestionOpts"
                    [value]="o"
                    (click)="$event.stopPropagation(); trigger.openPanel()">{{o}}</mat-option>

    </mat-autocomplete>
</mat-form-field>

这里我们附上MatAutoCompleteTrigger指令到输入并将其分配给名为的变量trigger。该触发指令被传递给每个上的 click 方法mat-option，每次从菜单中选择一个选项时都会触发它。该指令包含两个相关方法 https://material.angular.io/components/autocomplete/api#MatAutocompleteTrigger。这里我们调用openPanel。我们称之为stopPropagation on the $event对象以防止本机方法执行任何意外操作。

2 明确主义者：

.html

<mat-form-field>
    <input #nameInput
           matInput
           formControlName="name"
           #trigger="matAutocompleteTrigger"  
           [matAutocomplete]="autoName">

    <mat-autocomplete #autoName="matAutocomplete">

        <mat-option *ngFor="let o of suggestionOpts"
                    [value]="o"
                    (click)="selectionMade($event, trigger)">{{o}}</mat-option>

    </mat-autocomplete>
</mat-form-field>

.ts

import { MatAutocompleteTrigger } from '@angular/material/autocomplete';

...

selectionMade(event: Event, trigger: MatAutocompleteTrigger) {
    event.stopPropagation();
    trigger.openPanel();
}

这里，我们将指令和事件对象传递给组件的 .ts 文件中的函数，并执行与第一种方法完全相同的逻辑。如果毯子关注点分离 https://en.wikipedia.org/wiki/Separation_of_concerns是一个问题，就这样做。对于像这样的小工作，我更喜欢简约的方法，但我想每个都有自己的方法。