如何使tab键成为角材料中的回车键？

Question

<input type="search" id="setId" name="setId" [attr.list]='collectionType' [(ngModel)]="selValue" class="text-box"
  placeholder="--Select--" (focus)="ValidateParent()" (keyup.tab)="test()" (keyup)="EmitValues($event)" [id]="setId"
  [matAutocomplete]="auto" [title]="selValue" [placeholder]='WaterMarkText'>


<div [hidden]="IsCascading">
  <mat-autocomplete [id]="collectionType" #auto="matAutocomplete" (optionSelected)='onChange($event)'>
    <mat-option *ngFor="let items of codeList" [value]="items.text" [attr.data-text]='items.text' [id]="items.value">
      {{items.text}}
    </mat-option>
  </mat-autocomplete>
</div>

Angular material在选项卡选择时出现问题。像materiel auto complete一样，在单击选项卡按钮时无法选择值。但是它在单击Enter按钮时工作。因此，我需要手动覆盖Tabkey事件上的Enterkey事件。怎么可能？

Answer 1

改进我的评论，根据响应我们可以创建一个指令

import {
    Directive,
    AfterViewInit,
    OnDestroy,
    Optional
} from '@angular/core';
import {
    MatAutocompleteTrigger
} from '@angular/material';


@Directive({
    selector: '[tab-directive]'
})
export class TabDirective implements AfterViewInit, OnDestroy {
    observable: any;
    constructor(@Optional() private autoTrigger: MatAutocompleteTrigger) {}
    ngAfterViewInit() {
        this.observable = this.autoTrigger.panelClosingActions.subscribe(x => {
            if (this.autoTrigger.activeOption) {
                this.autoTrigger.writeValue(this.autoTrigger.activeOption.value)
            }
        })
    }
    ngOnDestroy() {
        this.observable.unsubscribe();
    }
}

您使用：

<input tab-directive type="text" matInput [formControl]="myControl" 
      [matAutocomplete]="auto" >

（参见stackblitz）

@Directive({
    selector: '[tab-directive]'
})
export class TabDirective {
    observable: any;
    constructor(@Optional() private autoTrigger: MatAutocompleteTrigger) {}

    @HostListener('keydown.tab', ['$event.target']) onBlur() {
        if (this.autoTrigger.activeOption) {
            this.autoTrigger.writeValue(this.autoTrigger.activeOption.value)
        }
    }

}

this.autoTrigger._onChange(this.autoTrigger.activeOption.value)

constructor(@Optional() private autoTrigger: MatAutocompleteTrigger,
    @Optional() private control: NgControl) {}
ngAfterViewInit() {
    this.observable = this.autoTrigger.panelClosingActions.subscribe(x => {
        if (this.autoTrigger.activeOption) {
            const value = this.autoTrigger.activeOption.value;
            if (this.control)
                this.control.control.setValue(value, {
                    emit: false
                });
            this.autoTrigger.writeValue(value);
        }
    })
}