无法使用Angular 4 +Webpack的虚拟键盘jQuery插件

Question

我正在尝试使用Angular 4模板上的虚拟键盘，这是我用npm install安装的Asp Core +webpack提供的--save-dev @types/ webpack.config.vendor.js中的虚拟键盘我放在下面这一行：

const treeShakableModules = [
    .....
    'virtual-keyboard',
   ...
];

在我的组件模板中：

<input id="mycontrol" type="text">

在.ts中：

import * as jQuery from "jquery";
import { KeyboardOptions, NavigateOptions } from "virtual-keyboard";

const kbOptions: KeyboardOptions = {
    display: {
        bksp: "\u2190",
        accept: `Next`,
        cancel: `Back`,
        normal: "ABC",
        meta1: "#+-",
        space: "Space",
        alt: `Alt`,
        s: `ABC`,
    },
    acceptValid: true,
    type: "input",
    layout: "custom",
    customLayout: {
        normal: [
            `a b c d e f g h i j k l m`,
            `n o p q r s t u v x y z w`,
            `1 2 3 4 5 6 7 8 9 0 . _ @`,
            `{alt} {s} {space} {meta1} {s} {bksp} `,
            `{cancel}  {accept}`
        ],
        shift: [
            `A B C D E F G H I J K L M`,
            `N O P Q R S T U V X Y Z W`,
            `1 2 3 4 5 6 7 8 9 0 . _ @`,
            `{alt} {s} {space} {meta1} {s} {bksp} `,
            `{cancel}  {accept}`
        ],
        meta1: [
            `- / : ; ( ) \u20ac & \" ! ? ' \``,
            `[ ] { } # % ^ * + = ° ´ §`,
            ` \\ | ~ < > $ \u00a3 \u00a5 , ' ² ³`,
            `{space} {meta1} {bksp}`,
            `{cancel}  {accept}`
        ],
        "alt-shift": [
            `A B C D E F G H I J K L M N O`,
            `P Q R S T U V X Y Z W \u00df \u00dc \u00d6 \u00c4`,
            `1 2 3 4 5 6 7 8 9 0 . _ @ \u0301`,
            `{alt} {s} {space} {meta1} {s} {bksp} `,
            `{cancel}  {accept}`
        ],
        alt: [
            `a b c d e f g h i j k l m n o`,
            `p q r s t u v x y z w \u00df \u00fc \u00f6 \u00e4`,
            `1 2 3 4 5 6 7 8 9 0 . _ @ \u0301`,
            `{alt} {s} {space} {meta1} {s} {bksp} `,
            `{cancel}  {accept}`
        ],
    },
    lockInput: true,
    alwaysOpen: true,
    appendLocally: true,
    color: "light",
    class: "sxcycx",
    updateOnChange: true,
    usePreview: false,
    tabNavigation: false,
    canceled: () => { console.log("cancelled"); }
};

const navOptions: NavigateOptions = {
    position: [0, 0],
    toggleMode: true,
    focusClass: "hasFocus",
    rowLooping: true,
};

然后

ngAfterViewInit(): any {
             try {



jQuery('#mycontrol').css("background-color", "red");  //I see the change
jQuery('#mycontrol').keyboard(kbOptions).addNavigation(navOptions);

....

在控制台中没有错误，但聚焦文本框没有显示键盘，我想肯定有一些东西要放到webpack.config.vendor.js中

谢谢

Answer 1

通过npm安装jquery和虚拟键盘。然后试试这个：

// In *.ts file:
import * as $ from 'jquery';
import 'virtual-keyboard';

$('.vk').keyboard({
  change: (e, keyboard, el) => {
    // Dispatch input event to notify angular about changes
    const inputEvent: any = document.createEvent('CustomEvent');
    inputEvent.initEvent('input', true, true);
    el.dispatchEvent(inputEvent);
  }
});

//在scss中：

@import "../../node_modules/virtual-keyboard/dist/css/keyboard-dark.min";

顺便说一句，为了能够订阅虚拟键盘事件，最好在那里创建指令并初始化键盘。