Question

我按照https://www.primefaces.org/primeng/#/toast的说明添加了烤面包模块。在我的组件的ts文件中，我添加了MessageService作为提供程序，并且我有一个messageService变量，并且我有一个showSuccess消息，一旦按下链接/按钮，该消息就会被调用。它可以与咆哮一起使用，但是我需要使用吐司，因为咆哮已被贬值。

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';

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

2 个答案: