7

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

我创建了一个 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>

我真的不知道该怎么做......提前谢谢你们

4

4 回答 4

5

您必须设置组件封装

@Component({
  encapsulation: ViewEncapsulation.None,
  ...
})
于 2018-12-29T19:18:48.740 回答
3

遇到同样的问题，找到了这个页面。也许这对 OP 来说为时已晚，但对其他人可能有用。

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

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

并且 2) 可以通过设置encapsulation: ViewEncapsulation.None为Victor96 的答案或更好的设置来解决encapsulation: ViewEncapsulation.ShadowDom。

希望这可以帮助。

于 2019-03-06T09:35:41.930 回答
2

尝试使用井号在模板引用变量中使用

<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');
  }
于 2018-11-16T12:37:48.847 回答
1

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

于 2020-12-17T15:48:14.827 回答