Question

我创造了一个用来解释我在说什么的傻瓜 https://plnkr.co/edit/42Gcd8jayIO3EReiKCLf?p=preview

//our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <input (keyup.enter)=func() >
    </div>
  `,
})
export class App {
  name:string;
  constructor() {
  }
  func(){
    console.log("lose focus here")
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

我想失去对keyup上输入框的关注

Answer 1

您可以通过在按键事件上设置 $event.target.blur() 来失去焦点，

<input (keyup.enter)="$event.target.blur()" >

<强> DEMO

Answer 2

有多种方法可以实现您想要的效果，另一个例子是使用@ViewChild和ElementRef。

HTML：

<input #myEventRef (keyup.enter)="myEvent()" />

组件：

import { Component, ElementRef, ViewChild } from "@angular/core";


@Component({
    selector: "app",
    templateUrl: "./app.component.html",
})
export class AppComponent {
    constructor(private readonly el: ElementRef) {
    }

    @ViewChild("myEventRef") myEventRef: ElementRef;

    myEvent() {
        this.myEventRef.nativeElement.blur();
    }
}

你可以继续使用@HostListener，我不打算显示它。

在Angular 4中，我如何失去对keyup的关注

2 个答案: