Angular PrimeNG消息阵列

Angular PrimeNG是一个开源框架，它有丰富的原生Angular UI组件，可以用来做很好的造型，这个框架用来做响应式网站，非常方便。在这篇文章中，我们将看到Angular PrimeNG中的Messages Array。

消息组件用于显示具有特定严重性的消息。为了显示消息，用户可以使用值属性。消息服务被忽略，一个消息数组被绑定到值属性，以便与组件共享消息。

语法:

<p-messages [(value)]="msgs"></p-messages>
<button type="button" 
        (click)="show()">Show
</button>
<button type="button" 
        (click)="clear()">Hide
</button>

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

第1步 。要创建一个angular应用程序，你需要通过npm命令安装angular命令行接口。

npm install -g angular-cli

第2步 。现在，我们将创建一个angular项目。

ng new project_name

第3步：在创建你的angular项目后，进入文件夹执行不同的操作。

cd project_name

第4步：创建Angular应用程序后，使用以下命令安装所需的模块。

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

项目结构：安装成功后，将出现以下项目结构。

Angular PrimeNG消息阵列

Project Structure

运行应用程序的步骤。在项目的根目录下使用以下命令运行该应用程序。

ng serve --open

例子1：这个例子描述了Angular PrimeNG Messages Array。

app.component.html

<div>
    <h1 style="color: green">GeeksforGeeks</h1>
    <h3>Angular PrimeNG Messages Array</h3>
    <p-messages [(value)]="gfg"
                [enableService]="false">
    </p-messages>
</div>

app.module.ts

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

app.component.ts

import { Component } from '@angular/core';
import { Message } from "primeng/api";
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})
export class AppComponent {
    gfg: Message[] = [];
  
    ngOnInit() {
        this.gfg = [
            { severity: 'info', 
              summary: 'Info ',
              detail: 'Messages Array' },
            { severity: 'success', 
              summary: 'Success ', 
              detail: 'Geeks for Geeks rocks' },
            { severity: 'warn', 
              summary: 'Warning ', 
              detail: 'Alert Message' },
            { severity: 'error', 
              summary: 'Error ', 
              detail: 'Report Bug!!' }
        ];
    }
}

输出:

Angular PrimeNG消息阵列

例子2 。这个例子描述了Angular PrimeNG Messages Array.的情况。

app.component.html

<div style="margin:100px;">
    <h1 style="color: green">GeeksforGeeks</h1>
    <h3>Angular PrimeNG Messages Array</h3>
    <button pButton type="button" 
                    label="Show" 
                    class="p-button-success" 
                    (click)="show()">
    </button>
    <button pButton type="button" 
                    label="Hide" 
                    class="p-button-warning" 
                    (click)="hide()">
    </button>
    <p-messages [(value)]="gfg" 
                [enableService]="false" 
                [closable]="false">
    </p-messages>
</div>

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } 
    from '@angular/platform-browser';
import { BrowserAnimationsModule } 
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { ButtonModule } from 'primeng/button';
import { MessagesModule } from "primeng/messages";
import { MessageModule } from "primeng/message";
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        MessageModule,
        MessagesModule,
        ButtonModule,
        BrowserAnimationsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
import { Message } from "primeng/api";
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})
export class AppComponent {
    gfg: Message[] = [];
    show() {
        this.gfg = [
            { severity: 'success', 
              summary: 'Success ', 
              detail: 'Geeks for Geeks rocks' }
        ];
    }
    hide() {
        this.gfg = [];
    }
}

输出:

Angular PrimeNG消息阵列