Компоненты PrimeNG
Messages

Сообщения

PrimeNG/Messages (opens in a new tab)

Компонент messages используется для отображения текстовых сообщений.

С чего начать

Подключите модуль

import { MessagesModule } from 'primeng/messages';
import { MessageModule } from 'primeng/message';

В .ts файле

import { Component, OnInit } from '@angular/core';
import { Message, MessageService } from 'primeng/api';
import { PrimeNGConfig } from 'primeng/api';
 
@Component({
  selector: 'app-prime-messages',
  templateUrl: './prime-messages.component.html',
  styleUrls: ['./prime-messages.component.scss'],
  providers: [MessageService]
})
export class PrimeMessagesComponent implements OnInit {
 
  msgs1: Message[] = [];
  msgs2: Message[] = [];
 
  constructor(private messageService: MessageService, private primengConfig: PrimeNGConfig) { }
 
  ngOnInit(): void {
    this.msgs1 = [
      { severity: 'success', summary: 'Success', detail: 'Message Content' },
      { severity: 'info', summary: 'Info', detail: 'Message Content' },
      { severity: 'warn', summary: 'Warning', detail: 'Message Content' },
      { severity: 'error', summary: 'Error', detail: 'Message Content' }
    ];
  }
 
  addMessages() {
    this.msgs2 = [
      { severity: 'success', summary: 'Success', detail: 'Message Content' },
      { severity: 'info', summary: 'Info', detail: 'Message Content' },
      { severity: 'warn', summary: 'Warning', detail: 'Message Content' },
      { severity: 'error', summary: 'Error', detail: 'Message Content' }
    ];
  }
 
  clearMessages() {
    this.msgs2 = [];
  }
 
  showViaService() {
    this.messageService.add({ severity: 'success', summary: 'Service Message', detail: 'Via MessageService' });
  }
 
}

Встройте компонент с помощью тэга p-messages или p-message.

Severities

<p-messages [(value)]="msgs1" [enableService]="false"></p-messages>

Dynamic

<button type="button" pButton pRipple (click)="addMessages()" label="Show" class="p-mr-2"></button>
<button type="button" pButton pRipple (click)="clearMessages()" icon="pi pi-times" label="Clear" class="p-button-secondary"></button>
 
<p-messages [(value)]="msgs2" [enableService]="false"></p-messages>

Message Service

<button type="button" pButton (click)="showViaService()" label="Via Service"></button>
<p-messages></p-messages>

Static Content

Always bet on Prime.

Inline Message

Form Layout

Username Username is not available.

Свойства Messages

NameTypeDefaultDescription
valuearraynullAn array of messages to display.
closablebooleantrueDefines if message box can be closed by the click icon.
stylestringnullInline style of the component.
styleClassstringnullStyle class of the component.
enableServicebooleantrueWhether displaying services messages are enabled.
escapebooleantrueWhether displaying messages would be escaped or not.
keystringnullId to match the key of the message to enable scoping in service based messaging.
showTransitionOptionsstring300ms ease-outTransition options of the show animation.
hideTransitionOptionsstring200ms cubic-bezier(0.86, 0, 0.07, 1)Transition options of the hide animation.

Шаблоны

NameParameters
content-

Свойства Message

NameTypeDefaultDescription
severitystringnullSeverity level of the message.
textstringnullText content.
escapebooleantrueWhether displaying messages would be escaped or not.
stylestringnullInline style of the component.
styleClassstringnullStyle class of the component.

Стили Messages

NameElement
p-messagesContainer element.
p-messageMessage element.
p-message-infoMessage element when displaying info messages.
p-message-warnMessage element when displaying warning messages.
p-message-errorMessage element when displaying error messages.
p-message-successMessage element when displaying success messages.
p-message-closeClose button.
p-message-close-iconClose icon.
p-message-iconSeverity icon.
p-message-summarySummary of a message.
p-message-detailDetail of a message.

Стили Message

NameElement
p-inline-messageMessage element.
p-inline-message-infoMessage element when displaying info messages.
p-inline-message-warnMessage element when displaying warning messages.
p-inline-message-errorMessage element when displaying error messages.
p-inline-message-successMessage element when displaying success messages.
p-inline-message-iconSeverity icon.
p-inline-message-textText of a message.