javascript - 将 xterm.js 集成到 Angular

我是 Angular 的新手。
我正在尝试使用 xterm.js ( https://xtermjs.org/ )，但显示效果不佳。
这是渲染:
Render

我创建了一个 xterm 组件。 xterm.component.ts 文件代码是:

import { Component, OnInit } from '@angular/core';
import { Terminal } from "xterm";

@Component({
  selector: 'app-xterm',
  templateUrl: './xterm.component.html',
  styleUrls: ['./xterm.component.css'],
})
export class XtermComponent implements OnInit {
  public term: Terminal;
  container: HTMLElement;

  constructor() { }

  ngOnInit() {
    this.term = new Terminal();
    this.container = document.getElementById('terminal');
    this.term.open(this.container);
    this.term.writeln('Welcome to xterm.js');
  }
}

我的xterm.component.html仅包含以下内容:

<div id="terminal"></div>

我真的不知道该怎么做更多...
提前谢谢各位

最佳答案

尝试通过使用哈希符号在模板引用变量中使用

<div #myTerminal></div>

并在组件中

@ViewChild('myTerminal') terminalDiv: ElementRef;

在 ngOnInit 中

ngOnInit() {
    this.term = new Terminal();
    this.term.open(this.terminalDiv.nativeElement);
    this.term.writeln('Welcome to xterm.js');
  }

关于javascript - 将 xterm.js 集成到 Angular，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53307998/