Я работаю над большим приложением, разрабатываемым несколькими командами в течение определенного периода времени.
Разработчик внешнего интерфейса из другого места добавил много повторяющегося императивного кода с манипулированием dom с использованием jquery повсюду в приложении (в каждом компоненте) для решения проблем доступности.
Я пытаюсь очистить этот код. Я переместил некоторый код в директиву (например: - для выделения элемента, когда он сфокусирован с помощью клавиатуры, или для удаления контура при размытии)
Вот моя директива.
import { Directive, HostListener, ElementRef, OnInit, Input, AfterViewInit } from '@angular/core';
import { AccessibilityService } from 'src/app/services/accessibility.service';
@Directive({
selector: '[keyboardFocus]'
})
export class KeyboardFocusDirective implements OnInit, AfterViewInit {
@Input('outlineOnFocusFor') outlineFor: 'self'|'parent'|'none'|null|undefined;
private readonly outlineStyleOnFocus = '1px solid black';
private tabindexChange: boolean;
private elemToOutine: any;
constructor(private el: ElementRef, private accessibilityService: AccessibilityService) { }
ngOnInit() {
this.accessibilityService.currentTabindexChange.subscribe((tabindexChange: boolean) => {
this.tabindexChange = tabindexChange;
if (this.el && this.el.nativeElement) {
this.el.nativeElement.tabIndex = this.tabindexChange ? -1 : 0;
}
});
}
ngAfterViewInit() {
switch (this.outlineFor) {
case 'parent':
this.elemToOutine = this.el.nativeElement.parentElement;
break;
case 'none':
this.elemToOutine = null;
break;
case 'self':
case null:
case undefined:
default:
this.elemToOutine = this.el.nativeElement;
break;
}
}
@HostListener('keyup.tab', ['$event'])
@HostListener('keyup.shift.tab')
onKeyboardTabFocus(event: KeyboardEvent) {
if (!this.elemToOutine)
return;
this.elemToOutine.style.outline = this.outlineStyleOnFocus;
event.stopImmediatePropagation();
}
@HostListener('blur', ['$event'])
onKeyboardBlur(event: KeyboardEvent) {
if (!this.elemToOutine)
return;
this.elemToOutine.style.outline = '';
event.stopImmediatePropagation();
}
}
Вот как я использую его в воображаемом компоненте.
<div class="something">
<section class="something-else" keyboardFocus outlineOnFocusFor="parent">some content 1</section>
<section class="something-else-2" keyboardFocus>some content 2</section>
<section class="something-else-3" keyboardFocus outlineOnFocusFor="none">some content 3</section>
</div>
Кажется, это отлично работает в сборке dev. Однако сборка CLI с флагом --prod выдает такую ошибку:
ОШИБКА в src/app/features/enrollments/ate-requests/ate-requests.component.html(73,17): Директива KeyboardFocusDirective, ожидалось 1 аргумент, но получено 0. src/app/ features/enrollments/ate-requests/ate-requests.component.html(141,17): : Директива KeyboardFocusDirective, ожидалось 1 аргумент, но получено 0. src/app/features/enrollments/ate- request/ate-requests.component.html(156,23): : Директива KeyboardFocusDirective, ожидалось 1 аргумент, но получено 0.
Одна и та же ошибка, везде где используется директива. Я не мог понять, что может быть недостающим аргументом. Мы ценим любые предложения. Спасибо :)