Angular混合开发移动端使用自定义虚拟键盘组件时进行事件订阅

1、应用场景

我们开发了一个虚拟键盘的组件，然后将虚拟键盘的组件全局挂载到根目录上去，通过某个属性去控制虚拟键盘的显示与否即可，但是，有一个难点，就是在使用到的组件中如果通过虚拟键盘的Enter键将虚拟键盘的值传到我们想要的组件中去呢？service服务几乎不考虑，因为你可以将值存到服务中去，但是你在使用到的那个组件中如何去知道用户点击了enter键呢？

2、手动封装一个类似Vue中的Bus事件分发

定义一个interface，中间有两个属性，也就是事件名称以及传递的数据值。

import { Injectable } from '@angular/core';
import { Subject, Subscription } from 'rxjs';
import { filter, map } from 'rxjs/operators';

interface IScreenEvent {
  eventType: string;
  eventData: any;
}

@Injectable()
export class EmitBusUtils {
  private _subject = new Subject<IScreenEvent>();

  public emit(eventType: string, eventData: any) {
    this._subject.next({
      eventType,
      eventData,
    });
  }

  subscribe(eventType: string, listener: (value: any) => void): Subscription {
    return this._subject.asObservable()
      .pipe(
        filter((value, index) => value.eventType === eventType),
        map((value, index) => value.eventData),
      ).subscribe(listener);
  }
}

3、部分虚拟键盘组件的代码

虚拟键盘可以通过原生js的dom操作等实现或者可以去参考开源库等不同的插件的代码实现，在封装的虚拟键盘的组件中，我们想要实现值的传递，就需要在用户按下enter键的时候，去emit数据出去，并且关闭虚拟键盘，将虚拟键盘上的值填入我们想要的对应的地方去。

import { AfterViewInit, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { EmitBusUtils } from '@core/utils/emit-bus.utils';
import { AppService } from 'app/app.service';
declare var aKeyboard: any;

@Component({
  selector: 'virtual-keyboard',
  template: `
    <div class="box" >
      <ion-icon
        class="delete-icon delete"
        (click)="onClose()"
        src="assets/icon/close-outline.svg"
      ></ion-icon>
      <ion-input
        (touchstart)="onTouchStart($event)"
        (touchmove)="onTouchMove($event)"
        (touchend)="onTouchEnd($event)"
        id="inputKeyboard"
        placeholder=" 按住此区域可进行拖拽"
        readonly
      ></ion-input>
      <div id="main"></div>
    </div>
  `,
  styles: [
    `
      .box {
        position: fixed;
        width: 300px;
        height: 240px;
        box-shadow: 2px 2px 4px rgb(0 0 0 / 10%);
        top: 100px;
        left: 300px;
      }

      #input {
        margin: auto;
        background: #fff;
        border-top-left-radius: 0.3rem;
        border-top-right-radius: 0.3rem;
        border-left: 1px solid #f7ecec;
        border-top: 1px solid #f7ecec;
        border-right: 1px solid #f7ecec;
      }

      ion-icon.drag-icon {
        font-size: 2rem;
        position: absolute;
        left: -18px;
        top: 4px;
      }

      ion-icon.delete-icon {
        font-size: 1.5rem;
        position: absolute;
        right: -5px;
        top: -19px;
        color: #ccc;
      }
    `,
  ],
})
export class KeyboardComponent implements AfterViewInit {
  _isShow; // 是否显示
  @Input()
  set isShow(value: any) {
      this._isShow = value;
  }

  get isShow() {
      return this._isShow;
  }
  @Output() change: EventEmitter<boolean> = new EventEmitter<boolean>();
  @Output() sendData: EventEmitter<any> = new EventEmitter<any>();
  constructor(private _app: AppService, private _bus: EmitBusUtils) {

  }
  keyboard;
  inputKeyboard;
  container;
  isDown = false; // 是否按下拖拽图标
  position = {
    start_x: 0,
    start_y: 0,
    move_x: 0,
    move_y: 0,
    box_x: 0,
    box_y: 0,
  };

  ngAfterViewInit() {
   if (this._isShow) {
     this.inputKeyboard = document.querySelector('#inputKeyboard');
     this.container = document.querySelector('.box');
     this.keyboard = new aKeyboard.numberKeyboard({
       el: '#main',
       style: {
         position: 'absolute',
         top: this.position.box_x + 35 + 'px',
         left: this.position.box_y,
         right: '0',
         bottom: '0',
       },
     });
  
     this.keyboard.inputOn('#inputKeyboard', 'value');

     this.keyboard.onclick('Enter', (e) => {
       this.change.emit(false);
       this._bus.emit('getInputValue', {
         value: document.querySelector('#inputKeyboard')['value']
       });
     });
   }
  }

  // 关闭事件
  onClose() {
    this._isShow = false;
    this.change.emit(this._isShow);
  }

  // 触摸开始事件
  onTouchStart(e) {
    this.position['start_x'] = e.changedTouches[0].clientX;
    this.position['start_y'] = e.changedTouches[0].clientY;

    this.position['box_x'] = this.container.offsetLeft;
    this.position['box_y'] = this.container.offsetTop;
    this.isDown = true;
  }

  // 触摸移动事件
  onTouchMove(e) {
    if (!this.isDown) {
      return;
    }
    this.position['move_x'] =
      e.changedTouches[0].clientX - this.position['start_x'];
    this.position['move_y'] =
      e.changedTouches[0].clientY - this.position['start_y'];

    this.container.style.left =
      this.position['box_x'] + this.position['move_x'] + 'px';
    this.container.style.top =
      this.position['box_y'] + this.position['move_y'] + 'px';
  }

  // 手指离开屏幕
  onTouchEnd(e) {
    this.isDown = false;
  }

  
}

4、挂载到根目录下

挂载到根目录下通过app服务中的isShow为true还是false去控制。

<virtual-keyboard [isShow]="app.isShow" *ngIf="app.isShow" (change)="handleChange($event)" ></virtual-keyboard>

5、在需要使用虚拟键盘的地方去subscribe订阅事件

每次点击文本框的时候，进行取反操作，this.appService.isShow = !this.appService.isShow;也就是虚拟键盘的弹出与关闭，this._bus.subscribe('订阅的事件名(一定要与emit那边相同的事件名相同)'， (res) => { // 这里的res也就是那边emit传过来的值 })

  async handleOpen(query) {
    // tslint:disable-next-line: curly
    if (query && query.mark) return;
    this.appService.isShow = !this.appService.isShow;
    await this._bus.subscribe('getInputValue', (res) => {
      if (res) {
        console.log(res);
        query.count = Number(res.value);
      } 
    });
  }

6、最后展示下大致效果图

图1.png
图2.png