PrimeNG 侧边栏可清除 primeng 消息。为什么？

问题描述 投票：0回答：1

在我的 app.component.html 中我有

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

在 app.component.ts 中我有

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  providers: [MessageService]
})
export class AppComponent {
  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;
  }

  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});
  }
}

如果我打开侧边栏并在其中添加一些消息，它们就会出现，但是当我关闭并重新打开时，它们就会消失。 即使我可以看到 messages 变量仍然有它们。为什么？
附： 如果我添加更多消息，我只会看到新消息。

angular primeng message sidebar
1个回答
0
投票

侧边栏菜单有一个名为 

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 演示

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.