Angular PrimeNG终端属性

Angular PrimeNG是一个开源的前端UI库，它有许多原生的Angular UI组件，可以帮助开发人员建立一个快速和可扩展的网络解决方案。在这篇文章中，我们将看到Angular PrimeNG终端属性。

终端组件是PrimeNG提供的一个文本基础用户界面，我们可以在这里定义我们自己的命令和它们的输出。终端组件总共有4个属性。

Angular PrimeNG终端属性：

welcomeMessage。此属性用于设置在终端上显示的欢迎文本。
prompt:它用于设置每个命令的提示文本。
style。它用于组件的内联样式。
styleClass。它用于组件的风格类。

语法:

<p-terminal 
    welcomeMessage="Welcome to GFG Terminal." 
    prompt="geek $">
</p-terminal>

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

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

ng new appname

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

cd appname

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

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

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

Angular PrimeNG终端属性

Project structure

运行以下命令：

ng serve --open

例子1：在这个例子中，我们分别使用welcomeMessage和prompt属性改变了终端的欢迎信息和提示。

<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG Terminal Properties</h3>
  
<p-terminal 
    welcomeMessage="Welcome to GeeksForGeeks" 
    prompt="geek >>">
</p-terminal>

import { Component } from "@angular/core";
import { TerminalService } from 'primeng/terminal';
  
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"],
    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 { }

输出:

Angular PrimeNG终端属性

例子2：欢迎信息可以通过删除终端的welcomeMessage属性来轻松删除。没有它，终端也能正常工作。这个例子也说明了这一点。

<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG Terminal Properties</h3>
  
<p-terminal prompt="geek >>"></p-terminal>

import { Component } from "@angular/core";
import { TerminalService } from 'primeng/terminal';
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"],
    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 { }

输出:

Angular PrimeNG终端属性