Боковая панель PrimeNG очищает начальные сообщения. Почему?

В боковом меню есть компонент под названием p-messages. Если вы отметите этот элемент, вы заметите, что содержимое p-sidebar уничтожается при закрытии.

Когда вы снова открываете боковую панель, данные остаются прежними, но сообщения уничтожаются.

Я думаю, что компонент p-messages будет показывать только то, что ссылки на массивы изменяются, это может быть связано с тем, что *ngFor внутри компонента имеет trackBy, поэтому нам нужно сбросить каждую ссылку на элементы массива в памяти, чтобы мы обманом заставили p-messages думать, что есть есть новые сообщения в списке, для этого можно использовать деструктуризацию объекта! Я сделаю это, когда откроется боковая панель (onShowNotificationSideBar)

onShowNotificationSideBar() {
    this.notificationSideBarVisible = true;
    this.messages = [...this.messages.map(x => ({...x}))]; // <- creates new references for the array and its contents!
}

полный код

import { Component } from '@angular/core';
import { Message, MessageService } from 'primeng/api';

@Component({
  selector: 'sidebar-basic-demo',
  templateUrl: './sidebar-basic-demo.html',
  providers: [MessageService],
})
export class SidebarBasicDemo {
  title = 'WECO';
  notificationSideBarVisible = false;

  constructor(private messageService: MessageService) {
    messageService.messageObserver.subscribe((m: Message | Message[]) => {
      if (!Array.isArray(m)) {
        this.messages.push(m);
      }
      this.messages = [...this.messages];
    });
  }

  onShowNotificationSideBar() {
    this.notificationSideBarVisible = true;
    this.messages = [...this.messages.map(x => ({...x}))];
  }

  count = 0;

  messages: Message[] = [
    // { 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' }
  ];

  longSentence =
    'Let’s end all this nonsense about how long sentences = run-on sentences. You can have a six-word run-on sentence (“I went shopping I ate donuts.”), while most of the sentences below are much, much longer than that and are not run-ons'; //'And let’s end all this nonsense about how long sentences = run-on sentences. You can have a six-word run-on sentence (“I went shopping I ate donuts.”), while most of the sentences below are much, much longer than that and are not run-ons (except for a few examples like Jose Saramago).  But whether the sentence is grammatically correct isn’t nearly as important as whether the sentence is fun or beautiful.'

  showWarn() {
    let detail = 'User Deleted a Weco Rule';
    if (this.count++ % 5 === 0) detail = this.longSentence;
    this.messageService.add({
      severity: 'warn',
      summary: 'User Action',
      detail: detail,
    });
  }

  showSuccess() {
    let detail = 'Weco Rule 123 Saved';
    if (this.count++ % 5 === 0) detail = this.longSentence;
    this.messageService.add({
      severity: 'success',
      summary: 'Service Call',
      detail: detail,
    });
  }

  showError() {
    let detail = 'api-call:get-factories returned 404';
    if (this.count++ % 5 === 0) detail = this.longSentence;
    this.messageService.add({
      severity: 'error',
      summary: 'Service Call',
      detail: detail,
    });
  }
}

HTML

<div class = "main">
  <button type = "button" (click) = "onShowNotificationSideBar()" label = "Show">
    show sidebar
  </button>
  <p-sidebar
    [(visible)] = "notificationSideBarVisible"
    position = "right"
    [style] = "{width:'50em'}"
  >
    <button
      type = "button"
      pButton
      pRipple
      (click) = "showSuccess()"
      label = "S"
      class = "p-button-success"
    >
      success
    </button>
    <button
      type = "button"
      pButton
      pRipple
      (click) = "showWarn()"
      label = "W"
      class = "p-button-warning"
    >
      warn
    </button>
    <button
      type = "button"
      pButton
      pRipple
      (click) = "showError()"
      label = "E"
      class = "p-button-danger"
    >
      error
    </button>
    <h3>Messages</h3>
    <h5>{{messages}}</h5>
    <p-messages [(value)] = "messages" [enableService] = "false"></p-messages>
  </p-sidebar>
  <p-toast position = "center"></p-toast>
</div>

Демо-версия Stackblitz