如何从函数中用程序调用mat选项

Question

我需要在mat-select组件上实现双击事件的处理。其思想是能够在双击事件上调用函数，但在单击事件上保持正常行为。通常这是不可能的，因为垫子选择会立即显示垫子选项，不允许检测双击事件。

如果我试图用setTimeOut添加一些延迟，例如当垫子选择被触发时，垫子选项弹出窗口会显示而没有任何延迟。我找到了一个解决方法，这样我就可以通过从一开始就用[disabled]禁用垫子选择来双击垫子选择，这样我可以检测到双击垫子选择而不显示垫子选项，但当我尝试从singleClick((功能再次启用垫子选择并再次显示垫子选项弹出窗口时。我不能，因为在我再次单击组件之前，angular不会渲染新的更改。

理想情况下，我想在我的垫子选择上单击一次，调用我的singleClick((函数，然后用[disabled]="再次启用垫子选择；false"；并最终一次性渲染组件，但angular只检测到更改，并且不会仅在下一次单击交互时渲染组件。

我想做的是通过从我的singleClick((函数调用来显示mat选项。有没有办法通过我的singleClick功能以程序方式调用垫子选项？。我希望你能给我一些建议，或者在这种情况下处理双击事件的更好方法。代码示例

这是我的组件：

<mat-select placeholder="Double click posible, single click not showing options until second time clicked" [disabled]="disableMatSelect"
(click)="singleClick($event)" (dblclick)="doubleClick()" (openedChange)="openedChange($event)" [(value)]="selected">
<mat-option *ngFor="let option of options" [value]="option.value">
{{ option.viewValue }}
</mat-option>
</mat-select>

这是我想调用垫子选项弹出窗口的功能：

singleClick(event) {
this.isSingleClick = true;
setTimeout(() => {
if (this.isSingleClick && event.type == 'click') {
this.disableMatSelect = false;
//Here I would like to call for mat-options popup
this.clickEvent = 'Single Click';

}
}, 250);
}

Answer 1

我第一次尝试preventDefault()，但没有成功。所以我想出了这个变通办法，虽然不是最好的，但它可能会为你指明正确的方向。

1. 我创建了一个不可见的覆盖层来听点击，然后我stopPropagation()，这样点击就永远不会进行，直到垫子选择为止。

2. 我听着点击，如果在setTimeout()内部我们没有第二次点击，然后用.open()方法打开垫子，这个可以通过"点击"找到；观看孩子"；用@ViewChild('matSelect') matSelect: MatSelect;然后用this.matSelect.open()

3. 如果我们得到第二次点击，那么转到doubleClick()方法。

在你的堆栈里，你会找到答案和我必须做的改变。

您可以细化覆盖以更好地适应所选垫子的大小。

结果

{{clickEvent}}
<div class="select-container">
<mat-form-field>
<mat-select #matSelect placeholder=" Normal behavior on single click" (openedChange)=" openedChange($event)">
<mat-option *ngFor="let option of options" [value]="option.value">
{{ option.viewValue }}
</mat-option>
</mat-select>
</mat-form-field>
<div class="click_listener-container" (click)="singleClick($event);">
</div>
</div>

enum values {
OPTION_1,
OPTION_2,
OPTION_3
}
@Component({
selector: 'select-overview-example',
templateUrl: 'select-overview-example.html',
styleUrls: ['select-overview-example.css']
})
export class SelectOverviewExample {
@ViewChild('matSelect') matSelect: MatSelect;
options = [
{ value: values.OPTION_1, viewValue: 'Option 1' },
{ value: values.OPTION_2, viewValue: 'Option 2' },
{ value: values.OPTION_3, viewValue: 'Option 3' }
];
disableMatSelect = true;
isSingleClick = false;
clickEvent = 'Not Clicked';
constructor() {}
async singleClick(event) {
event.stopPropagation();
if (this.isSingleClick) {
this.doubleClick();
} else {
this.isSingleClick = true;
setTimeout(() => {
if (this.isSingleClick && event.type == 'click') {
console.log('single click');
this.clickEvent = 'Single Click';
this.isSingleClick = false;
this.matSelect.open();
}
}, 250);
}
}
doubleClick() {
this.isSingleClick = false;
this.clickEvent = 'Double Click';
console.log('======>Doble click');
}
openedChange(opened: boolean) {
if (opened === false) {
this.disableMatSelect = true;
console.log('disableMatSelect==', this.disableMatSelect);
}
}
}

编辑

如果您有多个垫子选择，您可以按照使用@ViewChildren

@ViewChildren('matSelect')
matSelections: QueryList<MatSelect>

然后，您可以像follow一样循环遍历元素。

this.matSelections.toArray().map(async (matSelect) => {
console.log(matSelect)
}),