时间戳

首页 > 解决方案 > PrimeNg p-growl 组件未正确显示，延迟后不会消失

angular - PrimeNg p-growl 组件未正确显示，延迟后不会消失

问题描述

我正在尝试将 p-growl 组件用于通知，但不知何故，实际通知缺少关闭 X 按钮，并且在经过一定时间后不会消失。给你一个视觉印象：这是一个错误咆哮：

在此处输入图像描述

如您所见， tekst 显示的单词之间有很大的间隙，并且缺少 X 按钮。这是咆哮组件的代码。

组件.html

<p-growl [value]="msgs"></p-growl>

组件.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import { NotificationService } from '../Services/notification.service';
import { Message } from 'primeng/api';

@Component({
  selector: 'app-notification',
  templateUrl: './notification.component.html',
  styleUrls: ['./notification.component.css']
})
export class NotificationComponent implements OnInit, OnDestroy {
  msgs: Message[] = [];
  subscription: Subscription;

  constructor(private notificationService: NotificationService) { }

  ngOnInit() {
    this.subscribeToNotifications();
  }

  subscribeToNotifications() {
    this.subscription = this.notificationService.notificationChange
    .subscribe(notification => {
      this.msgs.length = 0;
      this.msgs.push(notification);
    });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

它适用于服务，我怀疑问题出在服务中，但这是服务的代码。

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';

type Severities = 'success' | 'info' | 'warn' | 'error';

@Injectable({
  providedIn: 'root'
})
export class NotificationService {
  notificationChange: Subject<Object> = new Subject<Object>();

  notify(severity: Severities, summary: string, detail: string) {
    this.notificationChange.next({ severity, summary, detail });
  }
}

谁能看到发生了什么？我认为这与错误的导入有关，但似乎并非如此，而且我正在为图标导入必要的 css 文件，所以不能这样。

谢谢

标签： angularangular5primeng

解决方案

好的解决了它，我忘了将这些行添加到我在 angular-cli.json 中的样式中并安装 primeicons。

    "styles": [
      "src/styles.css",
      "node_modules/primeng/resources/themes/omega/theme.css",
      "node_modules/primeng/resources/primeng.min.css",
      "node_modules/primeicons/primeicons.css",

此外，如果您希望咆哮声在一段时间后消失，您必须先将一个新的空数组分配给咆哮消息数组变量，然后再按如下方式：

  this.msgs = [];

如果您不这样做，您将无法在推送第一条消息后推送任何新消息。有关更多信息，请参阅本文。https://www.primefaces.org/primeng-4-0-0-rc4-released/

推荐阅读