私の質問がばかげている場合は申し訳ありませんが、アプリケーションで遅延の問題が発生しています。KEYPRESSイベントハンドラーが原因です。アプリケーション全体でこの以下のディレクティブを使用しています。をチェックKeyPressしHostListenerます。キーが押されると、このディレクティブは正規表現で値をチェックしpreventDefault、条件がfalseの場合に実行します。
private regexMap = { // add your own
'999': /^([0-9]){0,3}$/g,
'9999': /^([0-9]){0,4}$/g,
...
...
}
@HostListener('keypress', [ '$event' ])
public nInput(event: KeyboardEvent) {
// Allow Backspace, tab, end, and home keys
if (this.specialKeys.indexOf(event.key) !== -1) {
return;
}
this.pattern = this.regexMap[this.validationFormat];
const current: string = this.el.nativeElement.value;
const next: string = current.concat(event.key);
if (next && !String(next).match(this.pattern)) {
event.preventDefault();
}
}
この問題を修正する方法がわかりません。debounceTimeこの問題は修正されますか？このメソッドにデバウンスを追加する方法がわかりません。誰かがこの問題を解決するのを手伝ってください。
DebounceTimeの問題を修正しました:)ヘルプSubjectでデバウンス時間を追加しました。基本的に、ユーザーが何かを入力すると、すべてのアクションが停止し、EVENT（キーが押された値）がSUBJECTに送信され、サブジェクトのデバウンス時間で300ms待機してから、機能テストが実行されます。
private keyPressed = new Subject();
private subscription: Subscription;
private pattern: RegExp;
private regexMap = { // add your own
'999': /^([0-9]){0,3}$/g,
'9999': /^([0-9]){0,4}$/g,
...
...
}
private specialKeys: string[] = ['Backspace', 'Tab', 'End', 'Home'];
constructor(private el: ElementRef) {
}
public ngOnInit() {
this.subscription = this.keyPressed.pipe(debounceTime(300)).subscribe(
(event) => this.checkRegExpression(event)
);
}
public ngOnDestroy() {
this.subscription.unsubscribe();
}
@HostListener('keypress', ['$event']) public nInput(event: KeyboardEvent) {
event.preventDefault();
event.stopPropagation();
this.keyPressed.next(event);
}
private checkRegExpression(event) {
if (this.specialKeys.indexOf(event.key) !== -1) {
return;
}
this.pattern = this.regexMap[this.validationFormat];
const current: string = this.el.nativeElement.value;
const next: string = current.concat(event.key);
if (next && !String(next).match(this.pattern)) {
event.preventDefault();
}
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加