如何在 Angular 8 中正确使用 PrimeNg Toast

Question

它正在工作，但不是它应该的。在我按下提交按钮后，消息不是正确的toast 组件，而是简单地显示为普通文本。

我遵循了文档中的所有内容。这是我的文件。

package.json

"dependencies": {
    ...
    "primeicons": "^2.0.0",
    "primeng": "^8.0.3",
    ...
  },

angular.json

"styles": [
   "src/styles.css",
   "node_modules/primeicons/primeicons.css",
   "node_modules/primeng/resources/themes/nova-light/theme.css",
   "node_modules/primeng/resources/primeng.min.css"
],

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
...
import { ToastModule } from 'primeng/toast';
import { MessageService } from 'primeng/api';



@NgModule({
  declarations: [
    ...        
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ...
    ToastModule
  ],
  providers: [MessageService],
  bootstrap: [AppComponent]
})
export class AppModule { }

contribute.component.ts

import { Component, OnInit } from '@angular/core';
...
import { MessageService } from 'primeng/components/common/api';

@Component({
  selector: 'app-contribute',
  templateUrl: './contribute.component.html',
  styleUrls: ['./contribute.component.css']
})
export class ContributeComponent implements OnInit {
  constructor(private messageService: MessageService, ...) { }

  addSingle() {
    this.messageService.add({severity:'success', summary:'Service Message', detail:'Via MessageService'});
  }

  ngOnInit() {
    ...
  }

  onSubmit() {
    ...
    this.addSingle();
  }
}

contribute.component.html

<div class="container">
  <div class="row pt-5">
    <div class="col-md-12 col-lg-12 col-sm-12 bg-light">
      <form [formGroup]="editorForm" (ngSubmit)="onSubmit()">
        <div class="form-group">
          ...SOME INPUT FIELDS
        </div>
        <p-toast position="top-left"></p-toast>
        <button class="btn btn-primary mt-3 mb-3">Submit</button>
      </form>
    </div>
  </div>
</div>

我的意思是，它的工作。但不像一个好的toast 组件。请纠正我。

Answer 1

在 Angular 8 中：尝试以下方法

前置步骤：

在 app.module.ts 中：

import { MessagesModule } from 'primeng/messages';
import { MessageModule } from 'primeng/message';
import { ToastModule } from 'primeng/toast';

并在导入下

    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        AppRoutingModule,
        MessagesModule,
        MessageModule,
        ToastModule,
],

第 1 步：在组件中注入消息服务供您选择，如下所示

import { MessageService } from 'primeng/api';

第 2 步：在同一个组件上，您需要添加如下提供程序

@Component({
    selector: 'app-import-project',
    templateUrl: './import-project.component.html',
    styleUrls: ['./import-project.component.css'],
    providers: [MessageService],
})

第三步：在构造函数中声明消息服务

  constructor(
        private messageService: MessageService,
        private router: Router,
        private progress: NgProgress
    ) {}

第4步：在同一个component.ts file:上假设你要抛出错误信息

   showError() {
    console.log('Authentication Failed');
    this.messageService.add({
        severity: 'error',
        summary: 'Authentication Failed',
        detail: 'API Key or URL is invalid.',
    });
}

第 5 步：在相关的.html 文件中。添加如下 HTML 标记

<p-toast position="bottom-center"></p-toast>

输出：这肯定会像下面这样抛出正确的吐司

希望这能解决您的问题，而不是每次都创建新项目。请试一试。