Angular 5+的交互式终端组件

Angular 5+的交互式终端组件
插件名称 ng-terminal
发布时间 2020年6月3日
插件作者 qwefgh90

只是Angular 5+应用程序的另一个交互式终端模拟器组件。

安装:

# NPM
$ npm install ng-terminal --save

使用:

NgTerminalModule应该导入到您的应用模块中。

import { NgTerminalModule } from 'ng-terminal';
//...
@NgModule({
    imports: [
        NgTerminalModule
    //...

只需添加<ng-terminal>到您的中即可app.component.html。当应用程序启动时,您可以看到Web终端什么也不做。

<ng-terminal #term></ng-terminal>

现在,您可以在终端上使用NgTerminal具有开发人员API的对象进行打印或执行某些操作。您可以@ViewChild在组件中使用来获取对象。调用NgTerminalComponent后填充的对象非常重要ngAfterViewInit()

//...
export class YourComponent implements AfterViewInit{
  @ViewChild('term', { static: true }) child: NgTerminal;
  
  ngAfterViewInit(){
    this.child.keyEventInput.subscribe(e => {
      console.log('keyboard event:' + e.domEvent.keyCode + ', ' + e.key);

      const ev = e.domEvent;
      const printable = !ev.altKey && !ev.ctrlKey && !ev.metaKey;

      if (ev.keyCode === 13) {
        this.child.write('\r\n$ ');
      } else if (ev.keyCode === 8) {
        // Do not delete the prompt
        if (this.child.underlying.buffer.active.cursorX > 2) {
          this.child.write('\b \b');
        }
      } else if (printable) {
        this.child.write(e.key);
      }
    })
  }

  //...