Angular 属性指令 - prod 构建错误预期 1 个参数但得到 0

Question

我正在开发一个由多个团队在一段时间内开发的大型应用程序。

来自不同位置的前端开发人员添加了很多重复的命令式代码，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>

这似乎在开发版本中运行良好。然而，使用 --prod 标志构建的 CLI 会给出如下错误：

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-requests/ate-requests.component.html(156,23): : 指令 KeyboardFocusDirective，需要 1 个参数，但得到 0 个。

同样的错误，在所有使用该指令的地方。我无法弄清楚缺少的参数可能是什么。任何建议，将不胜感激。谢谢:)

Answer 1

您需要从 hostListeners 中删除 $event 参数。删除参数后它应该可以正常工作。

请在下面找到更新后的代码。也许这会解决您面临的问题。

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') 
  @HostListener('keyup.shift.tab') 
  onKeyboardTabFocus(event: KeyboardEvent) {
    if (!this.elemToOutine)
      return;

    this.elemToOutine.style.outline = this.outlineStyleOnFocus;
    event.stopImmediatePropagation();
  }

  @HostListener('blur')
  onKeyboardBlur(event: KeyboardEvent) {    
    if (!this.elemToOutine)
      return;

    this.elemToOutine.style.outline = '';
    event.stopImmediatePropagation();
  }
}

Answer 2

对于初学者（我不知道它是否足够），outlineOnFocusFor 是一个输入。因此，方括号：

  <section class="something-else" keyboardFocus [outlineOnFocusFor]="parent">some content 1</section>

Answer 3

找到了。太他妈傻了..感谢大家的时间和建议:o)

装饰器中缺少参数$event

@HostListener('keyup.shift.tab').

应该是

@HostListener('keyup.shift.tab', ['$event'])

Angular 属性指令 - prod 构建错误预期 1 个参数但得到 0

Angular attribute directive - error on prod build expected 1 arguments but got 0

angular-directive

angular-cli

angular

ng-build