Angular PrimeNG终端造型

Angular PrimeNG是一个用于Angular应用程序的UI组件库。它为各种任务提供了许多预建的主题和UI组件，如输入、菜单、图表、按钮等。在这篇文章中，我们将看到如何在Angular PrimeNG中使用终端造型。

终端组件是一个由PrimeNG提供的文本基础用户界面，我们可以在这里定义我们自己的命令和它们的输出。终端可以根据业务需求，通过使用结构类，在渲染组件时，由PrimeNG应用于终端的不同部分，来实现风格化。

Angular PrimeNG终端造型类：

• p-terminal:它是最外层的容器元素。
• p-terminal-content。它包含了终端的所有内容。
• p-terminal-prompt。该类适用于提示文本的包装元素。
• p-terminal-response。该类适用于命令的响应文本。
• p-terminal-input。它是用于输入命令的输入元素。

语法:

<p-terminal welcomeMessage="..." prompt="..."></p-terminal>

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

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

ng new appname

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

cd appname

第3步：最后，在你给定的目录中安装PrimeNG。

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

项目结构：在完成上述步骤后，项目结构将看起来像这样。

Project Structure

• 运行以下命令。

ng serve --open

例子1：在这个例子中，我们把终端内容的颜色改为绿色。在这里，除了当前的提示和欢迎词，所有的内容都将是绿色的，因为它们有独立的容器。

<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG Terminal Styling</h3>
  
<p-terminal 
    welcomeMessage="Hello Geeks! Welcome to GfG." 
    prompt="geek >>">
</p-terminal>

import { Component } from "@angular/core";
import { TerminalService } from 'primeng/terminal';
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    providers: [TerminalService]
})
  
export class AppComponent {
    constructor(private terminalService: TerminalService) {
        this.terminalService.commandHandler.subscribe(command => {
            let res = (command === 'greet') ? 
                'Hello Geek!' : 'Unknown command';
            this.terminalService.sendResponse(res);
        });
    }
}

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

.p-terminal-content{
    color: green;
}

输出:

例子2：在这个例子中，我们把提示的颜色改为红色，把反应的颜色改为绿色。

<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG Terminal Styling</h3>
  
<p-terminal 
    welcomeMessage="Hello Geeks! Welcome to GfG." 
    prompt="geek >>">
</p-terminal>

import { Component } from "@angular/core";
import { TerminalService } from 'primeng/terminal';
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    providers: [TerminalService]
})
  
export class AppComponent {
    constructor(private terminalService: TerminalService) {
        this.terminalService.commandHandler.subscribe(command => {
            let res = (command === 'greet') ? 
                'Hello Geek!' : 'Unknown command';
            this.terminalService.sendResponse(res);
        });
    }
}

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

.p-terminal-response{
    color: green;
}
  
.p-terminal-prompt{
    color: red;
}

输出: