Интегрировать xterm.js в Angular

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

Обнаружил ту же проблему и нашел эту страницу. Может быть, это слишком поздно для ОП, но может быть полезно для других.

Стили неверны, потому что 1) xterm.css не загружен и 2) инкапсуляция.

Мое решение 1) было добавить @import 'xterm/dist/xterm.css'; в файл scss для этого компонента.

и 2) можно решить, установив encapsulation: ViewEncapsulation.None как в ответе Victor96 или лучше 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');
  }