Question

我试图创建一个小指令来捕获windows global-keyup，然后调用回调，所以我基本上捕获了服务中的全局窗口和我的指令的密钥：

export class EnterActivationDirective implements OnInit {
  private _enterClicked: Action;

  @Input() public set enterClicked(action: Action) {
    this._enterClicked = action;
  }

  constructor(public el: ElementRef, public windowWrapperService: WindowWrapperService) {
  }

  ngOnInit() {
    this.windowWrapperService.nativeWindow.onkeyup = this.onWindowKeyUp.bind(this);
  }

  private onWindowKeyUp(event: any) {
    if (event.code === 'Enter' && this._enterClicked) {
      this._enterClicked();
    }
  }
}

Service和Action-Type并不是那么有趣，因为Service只是通过了本机窗口而Action-Type是一个没有任何参数或返回值的通用Callback。逻辑本身有效，但是我对绑定到动作有一些奇怪的效果。因此，我的其他组件之一注册到指令：

<div appEnterActivation [enterClicked]="onKeyUp.bind(this)">
  <div>
... Amended

然后触发搜索操作：

 public search(): void {
    this.searchInProgress = true;
    const param = this.createSearchParams();
    this.searchStarted.emit(param);
    this.timeReportEntryApiService.searchTimeReportEntries(param)
      .then(f => {
        const newObjects = ArrayMapper.MapToNewObjects(f, new TimeReportEntry());
        this.searchFinished.emit(newObjects);
        this.searchInProgress = false;
      }).catch(f => {
        this.searchInProgress = false;
        throw f;
      });
  }

  public get canSearch(): boolean {
    return this.form.valid && !this.searchInProgress;
  }

  public onKeyUp(): void {
    debugger ;
    if (this.canSearch) {
      this.search();
    }
  }

这里没有太多逻辑，但如果从回调开始搜索，似乎属性和函数就位，但它们在某种不同的对象上：

searchInProgress-property设置为true，但在第二次输入时，它再次为false
我有一些动画和绑定，没有一个被触发

由于一切都使用普通按钮，我几乎可以肯定它与回调和这个的绑定有关。

我研究了一下这个绑定，但是关于这个线程Use of the JavaScript 'bind' method似乎需要它。我也测试了没有绑定，但是 this 绑定到全局窗口变量。

Answer 1

为什么使用@Input？ Angular为这样一个用例做了@Output：

模板：

<div appEnterActivation (enterClicked)="onEnter()"></div>

类：

export class EnterActivationDirective implements OnInit {

  @Output() 
  public readonly enterClicked: EventEmitter<any> = new EventEmitter();

  @HostBinding('document.keyup.enter')
  onEnter(): void {
      this.enterClicked.emit();
  }

}

无需进行困难的检查或包装：）

Answer 2

由于您使用的是TypeScript，因此可以使用正确管理this的箭头功能。

 public onKeyUp = () => {
    debugger ;
    if (this.canSearch) {
      this.search();
    }
  }

在这种情况下，您只需将属性绑定设置为

即可

[enterClicked]="onKeyUp"

Angular2：绑定和回调

2 个答案: