в Angular2 как узнать, когда ЛЮБОЕ поле ввода ввода потеряло фокус
В Angular2 как узнать, когда ЛЮБОЕ поле ввода потеряло фокус ..! Если я использую наблюдаемые в форме:
form.valueChange.subscribe... не работает, так как я действительно хочу знать, когда поле потеряло размытие (фокус), поэтому я могу обновить свой магазин (если я обновляю хранилище до потери фокуса, мой курсор на текстовом вводе будет перенесен в конец, поскольку данные будут заменены что странно выглядит)
конечно, я могу добавить (change)="" на каждый вход, но у меня много …
- Как повторить fragment HTML несколько раз без ngFor и без другого @Component
- Запрос Firebase, если дочерний элемент дочернего элемента содержит значение
- Очистить историю и перезагрузить страницу при входе / выходе из системы с использованием Ionic Framework
- Повторите элемент HTML несколько раз, используя ngFor на основе числа
- Угловая 2 Труба заказа
Я думал о чем-то вроде:
this.form.valueChanges.debounceTime(1000).subscribe((changes:any) => { if (this.form.dirty){ this.appStore.dispatch(this.resellerAction.updateResellerInfo(changes)) } });
но проблема в том, что грязный остается грязным, поэтому он застрял в вечной петле заметок об изменениях …
Техас
Шон
- Загрузите внешний CSS-стиль в компонент Angular 2
- Angular2 Exception: не может привязываться к «routerLink», поскольку он не является известным родным свойством
- Угловой 2 - Ng Для использования чисел вместо коллекций
- Как я могу ограничить повторение ngFor некоторым количеством элементов в Angular?
- Обнаружение изменения углового2: ngOnИзменяет не стрельбу по вложенному объекту
- Как мы можем обнаружить, когда пользователь закрывает браузер?
- Ошибка установки углового с использованием npm из-за необходимости использовать строку
- Динамическое имя classа внутри ngClass в угловом 2
Событие blur не пузырится, поэтому нам нужно прослушивать каждый входной элемент напрямую. Угловое обеспечивает хорошее решение для этой ситуации.
Директива, которая применяется ко всем входным элементам внутри вашего шаблона.
Эта директива использует хост-прослушиватель для прослушивания событий blur во всех элементах, где применяется селектор, и пересылает событие пузырящегося input-blur :
@Directive({ selector: 'input,select', host: {'(blur)': 'onBlur($event)'} }) class BlurForwarder { constructor(private elRef:ElementRef, private renderer:Renderer) {} onBlur($event) { this.renderer.invokeElementMethod(this.elRef.nativeElement, 'dispatchEvent', [new CustomEvent('input-blur', { bubbles: true })]); // or just // el.dispatchEvent(new CustomEvent('input-blur', { bubbles: true })); // if you don't care about webworker compatibility } }
Добавив директиву BlurForwarder к directives: [...] она будет применяться ко всем элементам в своем шаблоне, которые соответствуют селектору.
Хост-слушатель прослушивает пузырьки событий input-blur и вызывает наш обработчик событий:
@Component({ selector: 'my-component', directives: [BlurForwarder], host: {'(input-blur)':'onInputBlur($event)'}, template: ` ` }) { onInputBlur(event) { doSomething(); } }
Почему бы не использовать фокусацию по умолчанию в DOM