Angular 5中如何通过切换按钮控制ngx-material-keyboard的开关？

嘿，我刚好在Angular项目里配置过ngx-material-keyboard的手动控制，给你分享两种实用的方法，完美适配你的场景：

方法一：通过KeyboardService全局控制 #

ngx-material-keyboard提供了KeyboardService，可以直接调用它的API来手动开启/关闭键盘，适合需要在组件逻辑里控制的场景：

步骤1：导入并注入服务 #

在你的组件文件里导入服务，然后通过构造函数注入：

import { Component, ViewChild, ElementRef } from '@angular/core';
import { KeyboardService } from 'ngx-material-keyboard';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  // 获取输入框的DOM引用
  @ViewChild('targetInput') targetInput: ElementRef;

  constructor(private keyboardService: KeyboardService) {}

  // 打开虚拟键盘
  openVirtualKeyboard() {
    // 第一个参数是目标输入元素，第二个是语言码
    this.keyboardService.open(this.targetInput.nativeElement, 'en-US');
  }

  // 关闭虚拟键盘
  closeVirtualKeyboard() {
    this.keyboardService.close();
  }
}

步骤2：模板中添加控制按钮 #

在HTML模板里给输入框加模板引用，再添加控制按钮：

<input #targetInput [matKeyboard]="'en-US'" type="text" placeholder="输入内容">
<div style="margin-top: 10px;">
  <button (click)="openVirtualKeyboard()">打开虚拟键盘</button>
  <button (click)="closeVirtualKeyboard()" style="margin-left: 10px;">关闭虚拟键盘</button>
</div>

这种方法的优势是可以在组件的任何逻辑里触发键盘的开关，比如响应下拉框切换等其他事件。

方法二：通过模板引用变量直接控制键盘实例 #

如果你不需要在组件逻辑里处理，只想在模板里直接控制，可以利用matKeyboard指令暴露的实例：

<input [matKeyboard]="'en-US'" type="text" #myKeyboard="matKeyboard" placeholder="输入内容">
<div style="margin-top: 10px;">
  <button (click)="myKeyboard.open()">打开键盘</button>
  <button (click)="myKeyboard.close()" style="margin-left: 10px;">关闭键盘</button>
</div>

这种方法更简洁，不需要修改组件的TypeScript代码，直接在模板里通过#myKeyboard="matKeyboard"获取键盘实例，调用它的open()和close()方法即可。

额外注意事项 #

• 确保你的模块已经正确导入了MatKeyboardModule，这是所有功能正常工作的基础；
• 两种方法都可以和输入框默认的“聚焦显示、失焦关闭”行为共存，不会互相冲突；
• 如果需要切换键盘语言，只需要在open()方法里传入对应的语言码（比如'zh-CN'，前提是你的键盘库支持该语言）。

内容的提问来源于stack exchange，提问作者Ram