Question

我是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>

我真的不知道该怎么做... 预先感谢大家

Answer 1

您必须设置组件封装

@Component({
  encapsulation: ViewEncapsulation.None,
  ...
})

Answer 2

遇到相同的问题并找到此页面。对于OP来说可能为时已晚，但对其他人可能有用。

样式错误，因为1）未加载xterm.css，2）封装。

我对1）的解决方案是在此组件的scss文件中添加@import 'xterm/dist/xterm.css';。

而2）可以通过将encapsulation: ViewEncapsulation.None设置为Victor96's answer或更好地设置encapsulation: ViewEncapsulation.ShadowDom来解决。

希望这会有所帮助。

Answer 3

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

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

Answer 4

我知道这很旧，但是我不得不将终端初始化放在ngAfterViewInit中。否则DOM元素是不确定的。

将xterm.js集成到Angular

4 个答案: