Angular 4 + Webpackで仮想キーボードjQueryプラグインを使用できません

Question

Asp Core + webpackのAngular 4テンプレートで仮想キーボードを使用しようとしています npm install --save-dev @ types/virtual .TSで

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

：

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, 
}; 

私のコンポーネントテンプレートに

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

：-keyboard webpack.config.vendor.jsで、私はこの行を置きます

、コンソールで

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と仮想キーボードをインストールします。そして、これを試してみてください：SCSSで

// 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); 
    } 
}); 

//：

ところで

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

、それはディレクティブを作成し、そこにキーボードを初期化する方が良いでしょう仮想キーボードイベントをサブスクライブできるようにします。