Question

在我的几个角度组件中，我会听取关键事件

@HostListener('window:keydown', ['$event']) keyInput(event: KeyboardEvent) {
   if (this.isActive) {
      if (event.keyCode === 27) {
         // do something
      }
   }
 }

在这种情况下，它只是一个键，但我也有更多

无论如何，我在这里的项目中看到了重复的代码。那么，这是可以接受还是我应该重构这个？如果是这样，那么首选方式是什么？

Answer 1

我会创建一个服务，其他组件可以在事件发生时订阅。例如：

@Injectable()
public class KeyEventService {
    private keydown$: Observable;

    constructor() {
        this.keydown$ = Observable.fromEvent(window, "keydown");
    }

    public getEscapeKeyListener() {
        return this.keydown$.filter((event: KeyboardEvent) => event.keyCode === 27);
    }
}

这允许您为事件设置一次侦听器，然后将其过滤到相应的按键。 public方法返回可以过滤特定键或多个键的observable，而无需设置新的observable。然后在你的组件中你会像这样使用它：

@Component({})
public class MyComponent implements OnInit, OnDestroy {
    private keyListenerSub: Subscription;

    constructor(private keyEventSvc: KeyEventService) { }

    ngOnInit() {
        this.keyListenerSub = this.keyEventSvc.getEscapeKeyListener().subscribe(() => {
            /* respond to keypress */
        });
    }

    ngOnDestroy() {
        this.keyListenerSub.unsubscribe();
    }
}

这允许您只设置一次侦听器，然后在组件中，您可以在需要的事件发生时采取适当的操作。

Angular：很多组件都会听取关键事件 - 重构？

1 个答案: