使用JavaScript库的离子3 xterm.js

我正在尝试将xterm.js库用于Ionic 3项目。使用JavaScript库的离子3 xterm.js

Github的来源：https://github.com/aircable/ionic-xterm和说明。它编译并启动，但它不能正确显示，或根本不显示。布局是错误的。

其他问题是加载插件。其中一些尝试被注释掉了。

这里是home.ts摘录

import { Component, OnInit } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 

import * as Terminal from "xterm"; 
//import style from 'xterm/dist/xterm.css'; 
import "xterm/dist/addons/fit/fit"; 

@Component({ 
    selector: 'terminal', 
    templateUrl: "home.html", 
    //styles: [ style ] 
    //styleUrls: ["./xterm.css"] 
}) 

export class HomePage implements OnInit { 

    private term: Terminal; 

    constructor(public navCtrl: NavController) { 

    this.term = new Terminal({cursorBlink: true}); 
    this.term.open(document.getElementById("terminal")); 

    //Terminal.loadAddon("fit"); 

    //this.term.fit(); 

    this.term.writeln('Welcome to xterm.js'); 

    // this is 
    this.term.on('key', (key, ev) => { 
     console.log(key); 
    }); 

    } 

    ngOnInit() {} 

}

来源

2017-08-04 Juergen Kienhoefer

你能告诉我这个库的使用情况下，您离子项目？任何控制台错误？ – Sampath

这是xterm：https://github.com/sourcelair/xterm.js 用于在网页中创建终端的库。你可以将它连接到ssh或任何东西。查看快速入门：https://xtermjs.org/ 与此在线演示类似：http://vtortola.github.io/ng-terminal-emulator/1 我的目标是为网络创建便携式应用，ios以及将终端连接到蓝牙至串行设备的android。根据运行位置的不同，它使用Cordova的Web蓝牙或Ionic原生BLE。 –

控制台上没有错误，没有编译错误。 –

得到了大部分的工作，只有适合插件没有。但没有错误。我调整行属性以选择大小。只看Github上源：https://github.com/aircable/ionic-xterm

import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 

import * as Terminal from "xterm"; 
//import style from 'xterm/dist/xterm.css'; 
import "xterm/dist/addons/fit/fit"; 

@Component({ 
    selector: 'terminal', 
    templateUrl: "home.html", 
    //styles: [ style ] 
    //styleUrls: ["./xterm.css"] 
}) 

export class HomePage implements AfterViewInit { 

    private term: Terminal; 
    // this finds the #terminal element, after view init 
    @ViewChild('terminal') terminal: ElementRef; 

    constructor(public navCtrl:NavController) { 

     Terminal.loadAddon("fit"); 

     this.term = new Terminal({ 
      cursorBlink: true, 
      //useStyle: true, 
      scrollback: 60, 
      rows: 30, 
     }); 

     // this is just simple echo 
     this.term.on('key', (key, ev) => { 
      console.log(key.charCodeAt(0)); 
      if (key.charCodeAt(0) == 13) 
       this.term.write('\n'); 
      this.term.write(key); 
     }); 

    } 

    // getting the nativeElement only possible after view init 
    ngAfterViewInit() { 

     // this now finds the #terminal element 
     this.term.open(this.terminal.nativeElement, true); 

     // calling fit is not quite working 
     // uses the obscure ion-textbox, which does not really exist, but changes the font size 
     // the number of rows will determine the size of the terminal screen 
     this.term.fit(); 
     this.term.writeln('Welcome to xterm.js'); 

    }

来源

2017-08-08 00:18:28

使用JavaScript库的离子3 xterm.js

回答

相关问题