吐司消息在角度项目中不起作用

Question

我按照https://www.primefaces.org/primeng/#/toast的说明添加了吐司模块。在组件的TS文件中，我添加了MessageService作为提供商，并且我有一个MessageService变量，并且我有一个showcescess消息，一旦按下链接/按钮，该消息就会被调用。它与Growl一起使用，但我需要使用吐司，因为咆哮是折旧的。

showSuccess() {
    this.messages = this.toast
    this.messageService.add({key: 'myKey1', severity: 'success', summary: 'Sample', detail: 'sample'});
}
<a (click)="showSuccess();"
<p-toast key="myKey1" position="top-right"></p-toast>

如果我有咆哮，上面的代码上述代码。

Answer 1

是否有错误消息？我能够使用此弹出式弹出窗口工作：

app.component.ts

import { Component } from '@angular/core';
import { MessageService } from 'primeng/api';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [MessageService]
})
export class AppComponent {
  constructor(private messageService: MessageService) { }
  showSuccess() {
    this.messageService.add({ key: 'myKey1', severity: 'success', summary: 'Service Message', detail: 'Via MessageService' });
  }
}

app.component.html

<p-toast key="myKey1" position="top-right"></p-toast>
<p-button (click)="showSuccess()" label="ClickMe"></p-button>

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { ToastModule } from 'primeng/toast';
import { ButtonModule } from 'primeng/button';
import { AppComponent } from './app.component';
@NgModule({
  imports: [BrowserModule, BrowserAnimationsModule, FormsModule, ToastModule, ButtonModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 2

您是否将toastmodule导入应用程序？

import {ToastModule} from 'primeng/toast';