Question

我正在尝试将对象传递给下面的创建指令，并且即使别名与@input装饰器匹配，元素属性仍然未定义。 onClick方法也正确点击。

  import { Directive, Input, HostListener } from '@angular/core';

  @Directive({
      selector: '[nextFocus]' 
  })

  export class NextFocusDirective {
  @Input('nextFocus')
  element: any;

  @HostListener('click', ['$event'])
   public onClick($event: Event) {
      debugger;
      $($event.target).focus();
   }
 }

这里是在html中使用的地方：

<button type="submit" class="btn btn-outline-success"
    ngbTooltip="Add"
    [nextFocus]="nextElement">
    <i class="mdi mdi-plus"></i>
</button>

我根据角度文档尝试了各种语法，无法解决它。我错过了什么导致元素属性被正确初始化？

Answer 1

我能够通过在输入属性

中添加一个setter来解决这个问题

private _element:any;

@Input('nextFocus')
set element(value: any) {
    this._element = value;
}

添加后我可以成功使用该元素。我认为这与导致初始问题的两个版本之间的ts生成有关。

Answer 2

您还可以在ngAfterContentInit生命周期方法中访问输入属性值：

  export class NextFocusDirective implements AfterContentInit {

      @Input('nextFocus')
      element: any;

      @HostListener('click', ['$event'])
      public onClick($event: Event) {
         debugger;
         $($event.target).focus();
      }

      ngAfterContentInit(): void {
          const val = this.element; 
          debugger; // val will contain input property value
      }

 }

引用错误：将输入传递给angular指令时“__decorate未定义”

2 个答案: