Angular PrimeNG消息组件

Angular PrimeNG是一个开源框架，它拥有丰富的原生Angular UI组件，这些组件被用来做伟大的造型，这个框架被用来制作响应式网站，非常容易。在这篇文章中，我们将了解如何在Angular PrimeNG中使用信息组件。我们还将了解到属性、样式以及代码中使用的语法。

消息组件：它用于显示具有特定严重性的消息。

信息组件的属性：

value : 它是一个要显示的信息数组。它是数组的数据类型，默认值为空。
closable : 它定义了消息框是否可以通过点击图标关闭。它是布尔数据类型，默认值为true。
style : 它设置组件的内联风格。它是字符串数据类型，默认值为空。
styleClass : 它设置组件的风格类别。它是字符串数据类型，默认值为空。
enableService :它指定是否启用显示服务信息。它是布尔数据类型，默认值为真。
escape : 它指定显示的信息是否会被转义。它是布尔数据类型，默认值为true。
key : 这是一个Id，用来匹配消息的关键，以便在基于服务的消息传递中实现范围界定。它是字符串数据类型，默认值为空。
showTransitionOptions :它设置显示动画的过渡选项。它的数据类型是布尔型，默认值是300ms缓和。
hideTransitionOptions。设置隐藏动画的过渡选项。它是布尔数据类型，默认值是200ms cubic-bezier（0.86, 0, 0.07, 1）。

信息组件的类型：

p-messages。它是一个容器元素。
p-message。它是一个消息元素。
p-message-info。在显示信息消息时，它是一个消息元素。
p-message-warn。在显示警告信息时，它是一个消息元素。
p-message-error。它是显示错误信息时的一个信息元素。
p-message-success。它是显示成功信息时的一个信息元素。
p-message-close。这是一个关闭按钮。
p-message-close-icon。它是一个关闭图标。
p-message-icon。它是一个严重性图标。
p-message-summary: 它是一个消息的摘要。
p-message-detail。它是一个消息的细节。

消息组件的属性：

severity : 它用于指定消息的严重程度。它是字符串数据类型，默认值为空。
text : 它用于设置文本内容。它是字符串数据类型，默认值为空。
escape : 显示的信息是否会被转义。 boolean true
style : 用于设置组件的内联风格。它是字符串数据类型，默认值为空。
styleClass : 它用于设置组件的风格类别。它是字符串数据类型，默认值为空。

消息组件的类型：

p-line-message : 它是一个消息元素。
p-line-message-info : 它是一个消息元素，当显示信息消息时。
p-inline-message-warn。在显示警告信息时，它是一个消息元素。
p-line-message-error : 它是显示错误信息时的一个信息元素。
p-line-message-success : 它是显示成功信息时的一个信息元素。
p-line-message-icon : 它用于指定严重性图标。
p-line-message-text。它是一个文本信息。

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

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

ng new appname

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

cd appname

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

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

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

Angular PrimeNG消息组件

例子1：这是一个基本的例子，说明了如何使用信息组件。

<h2>GeeksforGeeks</h2>
<h5>PrimeNG Messages Component</h5>
<p-messages [(value)]="gfg" 
  [enableService]="false">
</p-messages>

import { Component } from "@angular/core";
import { Message } from "primeng/api";
  
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
})
export class AppComponent {
  gfg: Message[];
  
  ngOnInit() {
    this.gfg = [
      { detail: "This is a message" },
      { detail: "This is a message" },
      { detail: "This is a message" },
      { detail: "This is a message" },
    ];
  }
}

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({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MessagesModule,
    MessageModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

输出:

Angular PrimeNG消息组件

例子2：在这个例子中，我们用按钮清除了信息。

<h2>GeeksforGeeks</h2>
<h5>PrimeNG Messages Component</h5>
<p-messages [(value)]="msgs"></p-messages>
<button type="button" (click)="hide()">Hide</button>

import { Component } from "@angular/core";
import { Message } from "primeng/api";
  
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
})
export class AppComponent {
  msgs = [
    {
      severity: "success",
      summary: "GeeksforGeeks",
      detail: "This is a message",
    },
  ];
  hide() {
    this.msgs = [];
  }
  ngOnInit() {}
}

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({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MessagesModule,
    MessageModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

输出:

Angular PrimeNG消息组件