Angular PrimeNG消息服务

Angular PrimeNG是一个开源框架，拥有丰富的原生Angular UI组件，可以用来做很好的造型，这个框架用来做响应式网站非常方便。这篇文章将向我们展示如何在Angular PrimeNG中使用Messages Service。我们还将了解在代码中使用的属性及其语法。

消息组件用于显示具有特别严重性的消息。消息服务可以通过导入类并将其定义为组件树中的提供者来使用，因为它不需要将值绑定到数组中。对于利用同一消息服务的多个消息组件，那么组件的键属性将被用来与消息键相匹配，以实现范围界定。

语法:

<button
    type="button" 
    pButton
    (click)="..." 
    label="...">
</button>

<p-messages></p-messages>

Angular PrimeNG消息服务属性：

value。它是一个要显示的信息数组。它是数组的数据类型，默认值为空。

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

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

ng new appname

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

cd appname

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

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

项目结构：它将看起来像如下。

Angular PrimeNG消息服务

运行下面的命令可以看到输出。

ng serve --open

例子1：下面是说明使用Angular PrimeNG消息服务的例子代码。

<div style="text-align: center">
    <h2 style="color: green">
        GeeksforGeeks
    </h2>
    <h5>
        Angular PrimeNG Message Service
    </h5>
    <button type="button" pButton 
            (click)="popUpServces()" 
            label="Click Here Geek">
    </button>
    <p-messages></p-messages>
</div>

import { Component } from "@angular/core";
import { MessageService } from "primeng/api";
  
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  providers: [MessageService],
})
export class AppComponent {
  constructor(private messageService: MessageService) {}
  
  popUpServces() {
    this.messageService.add({
      severity: "success",
      summary: "GeeksforGeeks",
      detail: "Success Service Message",
    });
  }
}

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

输出:

Angular PrimeNG消息服务

例子2：下面是另一个例子，说明了Angular PrimeNG信息服务使用错误信息弹出。

<div style="text-align: center">
    <h2 style="color: green">
        GeeksforGeeks
    </h2>
    <h5>Angular PrimeNG Message Service</h5>
    <button type="button" pButton 
            (click)="popUpServces()" 
            label="Click Here Geek">
    </button>
    <p-messages></p-messages>
</div>

import { Component } from "@angular/core";
import { MessageService } from "primeng/api";
  
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  providers: [MessageService],
})
export class AppComponent {
  constructor(private messageService: MessageService) {}
  
  popUpServces() {
    this.messageService.add({
      severity: "error",
      summary: "GeeksforGeeks",
      detail: "Error Service Message",
    });
  }
}

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

输出:

Angular PrimeNG消息服务