将 xterm.js 整合到 Angular
Integrate xterm.js to 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');
}
必须设置组件封装
@Component({
encapsulation: ViewEncapsulation.None,
...
})
遇到同样的问题,找到了这个页面。
也许这对 OP 来说为时已晚,但对其他人可能有用。
样式错误,因为 1) xterm.css
未加载,以及 2) 封装。
我对 1) 的解决方案是在该组件的 scss 文件中添加 @import 'xterm/dist/xterm.css';
。
和2)可以通过设置encapsulation: ViewEncapsulation.None
为或者更好的设置encapsulation: ViewEncapsulation.ShadowDom
.
来解决
希望对您有所帮助。
我知道这是旧的,但我不得不将终端初始化放在 ngAfterViewInit 中。否则 DOM 元素未定义。
我是 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');
}
必须设置组件封装
@Component({
encapsulation: ViewEncapsulation.None,
...
})
遇到同样的问题,找到了这个页面。 也许这对 OP 来说为时已晚,但对其他人可能有用。
样式错误,因为 1) xterm.css
未加载,以及 2) 封装。
我对 1) 的解决方案是在该组件的 scss 文件中添加 @import 'xterm/dist/xterm.css';
。
和2)可以通过设置encapsulation: ViewEncapsulation.None
为encapsulation: ViewEncapsulation.ShadowDom
.
希望对您有所帮助。
我知道这是旧的,但我不得不将终端初始化放在 ngAfterViewInit 中。否则 DOM 元素未定义。