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

Question

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

您可以看到tekst在单词之间显示出很大的间隙，并且缺少X按钮。这是咆哮组件的代码。

component.html

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

component.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文件，所以不可能是这种情况。

谢谢

Answer 1

好了，我忘了把这些行添加到我在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/