angular - Ionic 3 使用 JavaScript 库 xterm.js

Question

我正在尝试将 xterm.js 库用于 Ionic 3 项目。

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 () {}

}

Answer 1

大部分都可以工作，只有 fit 插件没有。但没有错误。我调整行属性以选择大小。查看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');

    }