Сообщения
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
Name | Type | Default | Description |
---|---|---|---|
value | array | null | An array of messages to display. |
closable | boolean | true | Defines if message box can be closed by the click icon. |
style | string | null | Inline style of the component. |
styleClass | string | null | Style class of the component. |
enableService | boolean | true | Whether displaying services messages are enabled. |
escape | boolean | true | Whether displaying messages would be escaped or not. |
key | string | null | Id to match the key of the message to enable scoping in service based messaging. |
showTransitionOptions | string | 300ms ease-out | Transition options of the show animation. |
hideTransitionOptions | string | 200ms cubic-bezier(0.86, 0, 0.07, 1) | Transition options of the hide animation. |
Шаблоны
Name | Parameters |
---|---|
content | - |
Свойства Message
Name | Type | Default | Description |
---|---|---|---|
severity | string | null | Severity level of the message. |
text | string | null | Text content. |
escape | boolean | true | Whether displaying messages would be escaped or not. |
style | string | null | Inline style of the component. |
styleClass | string | null | Style class of the component. |
Стили Messages
Name | Element |
---|---|
p-messages | Container element. |
p-message | Message element. |
p-message-info | Message element when displaying info messages. |
p-message-warn | Message element when displaying warning messages. |
p-message-error | Message element when displaying error messages. |
p-message-success | Message element when displaying success messages. |
p-message-close | Close button. |
p-message-close-icon | Close icon. |
p-message-icon | Severity icon. |
p-message-summary | Summary of a message. |
p-message-detail | Detail of a message. |
Стили Message
Name | Element |
---|---|
p-inline-message | Message element. |
p-inline-message-info | Message element when displaying info messages. |
p-inline-message-warn | Message element when displaying warning messages. |
p-inline-message-error | Message element when displaying error messages. |
p-inline-message-success | Message element when displaying success messages. |
p-inline-message-icon | Severity icon. |
p-inline-message-text | Text of a message. |