Angular PrimeNG 终端组件

Angular PrimeNG 是一个开源框架，具有丰富的原生 Angular UI 组件集，可用于出色的样式，并且该框架用于非常轻松地制作响应式网站。在本文中，我们将了解如何在 Angular PrimeNG 中使用 Terminal 组件。我们还将了解将在代码中使用的属性、样式以及它们的语法。

终端组件：用于制作基于文本的用户界面。

特性：

• welcomeMessage ：它是在终端上显示的初始文本。它是字符串数据类型，默认值为空。
• prompt ：它是每个命令的提示文本。它是字符串数据类型，默认值为空。
• style ：组件的内联样式，字符串数据类型，默认为null。
• styleClass ：指定组件的样式类，为字符串数据类型，默认值为null。

造型：

• p-terminal：它是一个容器元素。
• p-terminal-content：终端的内容。
• p-terminal-prompt：提示文字。
• p-terminal-response：是命令响应。
• p-terminal-input：输入命令的Input元素。

创建 Angular 应用程序和模块安装：

第 1 步：使用以下命令创建一个 Angular 应用程序。

ng new appname

第 2 步：创建项目文件夹（即 appname）后，使用以下命令移动到该文件夹。

cd appname

第 3 步：在给定目录中安装 PrimeNG。

npm install primeng --save
npm install primeicons --save

项目结构：安装完成后如下图所示：

示例：这是展示如何使用终端组件的基本示例。

app.component.ts

import { Component } from '@angular/core';
import { TerminalService } from 'primeng/terminal';
import { Subscription } from 'rxjs';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  providers: [TerminalService]
})
export class AppComponent {
  subscription: Subscription;
  
  constructor(private terminalService: TerminalService) {
    this.terminalService.commandHandler.subscribe(command => {
      let response =
        command === 'cd abc'
          ? 'changed Current Directory to abc'
          : 'Please Enter a Valid Command: ';
      this.terminalService.sendResponse(response);
    });
  }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } 
    from '@angular/platform-browser/animations';
  
import { AppComponent } from './app.component';
import { TerminalModule } from 'primeng/terminal';
  
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    TerminalModule,
    FormsModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

输出：

参考： https://primefaces.org/primeng/showcase/#/terminal