使用 open openPanel() 方法打开 matAutocomplete [英] Open matAutocomplete with open openPanel() method

问题描述

我正在使用 Angular Material 的 ma​​tAutocomplete 组件，并且根据 docs，有一种方法可以打开/关闭带有 openPanel()/closePanel() 方法的自动完成面板.关于如何将其集成到已经工作的示例中的任何建议?

I'm working with Angular Material's matAutocomplete component, and according to the docs, there is a method which can open/close an autocomplete panel with a openPanel()/closePanel() method. Any suggestion to how can I integrate it into already working example?

这是我对 尝试实现该功能时的示例.

推荐答案

Material 文档应该更清晰.虽然您可以通过各种体操例程来实现此功能(例如操作文档对象、使用 @ViewChild 或创建事件侦听器)，但对我而言，它归结为以下两种方式:

The Material documentation should be clearer. Whilst there are various gymnastic routines you can do to achieve this functionality (like manipulating the document object, using @ViewChild, or creating event listeners), for me it boils down to the two following ways:

<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 的变量.此触发器指令传递给每个 mat-option 上的 click 方法，每次从菜单中选择一个选项时都会触发该方法.指令 包含两个相关方法.这里我们调用openPanel.我们在 $event 对象上调用 stopPropagation 来防止本地方法做任何意想不到的事情.

Here we're attaching the MatAutoCompleteTrigger directive to the input and assigning it to a variable named trigger. This trigger directive is passed to the click method on each mat-option, which fires every time an option is selected from the menu. The directive contains two pertinent methods. Here we call openPanel. We call stopPropagation on the $event object to prevent the native methods doing anything unexpected.

.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 文件中的函数，并执行与第一种方法完全相同的逻辑.如果一揽子关注点分离是一个问题，请按此方式操作.对于像这样的小工作，我更喜欢极简主义的方法，但我想每个人都有自己的方法.

Here we're passing the directive and event object to a function in the component's .ts file, and performing exactly the same logic as the first approach. If blanket separation of concerns is a concern, do things this way. For small jobs like this I prefer the minimalist approach, but each unto their own, I guess.

这篇关于使用 open openPanel() 方法打开 matAutocomplete的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！