angular – 检测并警告用户有关大写锁定的信息

编写指令并添加一个监听器.将它添加到组件的主包装器div中,因此组件将获得发射.一旦收到事件更改,就会触发链接到label标签的属性的状态.它将有助于隐藏和显示* ngIf,条件是你的听众的响应(通过@Output到组件).

以下显示动态消息：

HTML：

<div (capsLock)="capsOn=$event">
  <input type="text"  >
  <label *ngIf="capsOn">Caps Locked</label>
</div>

指示：

@Directive({ selector: '[capsLock]' })
export class TrackCapsDirective {
  @Output('capsLock') capsLock = new EventEmitter<Boolean>();

  @HostListener('window:keydown',['$event'])
  onKeyDown(event: KeyboardEvent): void {
    const capsOn = event.getModifierState && event.getModifierState('CapsLock');
      this.capsLock.emit(capsOn);
  }
  @HostListener('window:keyup',['$event'])
  onKeyUp(event: KeyboardEvent): void {
    const capsOn = event.getModifierState && event.getModifierState('CapsLock');
      this.capsLock.emit(capsOn);
  }
}

DEMO