javascript - 使用键盘输入登录 Angular

Question

我有一个按钮，单击后会转到 Angular 中的下一个路线/页面。 有没有一种方法可以使用相同的按钮，但有时不单击它，而是让用户在键盘上输入 secret 密码以导航到下一页。 示例:如果用户输入“nextpage”，他应该转到下一页。

这是工作 stackblitz页面路由代码

HTML:

<button (click)=goToNextPage()>Click me or type the passphrase</button>

TS:

goToNextPage() {
    this.router.navigate(['/newPage'], { skipLocationChange: true });
  }

Answer 1

constructor() {
  document.addEventListener('keyup', this.addkey);
}

typed = '';

addkey = event =>  {
  this.typed += String.fromCharCode(event.keyCode);
  if (this.typed.endsWith('NEXTPAGE')) {
    this.goToNextPage();
  }
};

ngOnDestroy() {
  document.removeEventListener('keyup', this.addkey);
}

https://stackblitz.com/edit/us-keyboard-to-go-7kmsl7?file=src/app/checkin/checkin.component.ts

如果需要，您可以测试退格键以删除最后一个字符。