angular4+使用PrimeNG Toast

最新推荐文章于 2021-12-10 16:36:29 发布

weixin_34202952

最新推荐文章于 2021-12-10 16:36:29 发布

阅读量446

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/lwenhao/blog/1927299

版权

2019独角兽企业重金招聘Python工程师标准>>>

angular4+使用PrimeNG Toast

PrimeNG官方地址：https://www.primefaces.org/primeng/#/

一、安装

npm install primeng --save
注意：Angular CLI: 6.1.3 安装primeng 6.1.0存在问题。

二、Import

在app.module.ts 添加

import { ConfirmDialogModule } from 'primeng/primeng';
import { ToastModule } from 'primeng/toast';
import { ProgressBarModule } from 'primeng/progressbar';

import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ConfirmDialogModule,
        ToastModule,
        ProgressBarModule,
    ],
    //...
})

三、样式配置

在src目录下找到styles.css，添加：

@import "~font-awesome/css/font-awesome.min.css";
@import "~primeng/resources/themes/bootstrap/theme.css";
@import "~primeng/resources/primeng.min.css";

四、使用

详细配置请访问：https://www.primefaces.org/primeng/#/toast

1. 在html中添加：

<p-toast></p-toast>
<button type="button" pButton (click)="showSuccess()" label="Success" class="ui-button-success"></button>

2.修改对应的ts

import {Component} from '@angular/core';
import {MessageService} from 'primeng/api';

@Component({
    templateUrl: './my.component.html'
})
export class MyComponent {

    constructor(private messageService: MessageService) {}

    showSuccess() {
        this.messageService.add({severity:'success', summary: 'Success Message', detail:'Order submitted'});
    }

}

转载于:https://my.oschina.net/lwenhao/blog/1927299