极客教程Angular PrimeNG Toast组件
Angular PrimeNG是一个开源的框架，有丰富的原生Angular UI组件，用来做很好的造型，这个框架用来做响应式的网站非常容易。它提供了大量的模板、组件、主题设计、广泛的图标库等等。在这篇文章中，我们将看到Angular PrimeNG Toast组件。
吐司组件可以用来渲染信息或任何信息的叠加。Angular PrimeNG提供了不同种类的祝酒词，可以用来一次显示多条信息或坚持在特定的位置，有不同程度的信息和可以在不同的位置对齐。吐司组件还提供了特定的模板，以便在确认时显示，可以通过点击按钮清除。
Angular PrimeNG Toast组件：
- Severities。这个组件决定了信息的不同严重程度，有效值是 “成功”、”信息”、”警告 “和 “错误”。
- position。信息可以被调整到不同的位置，位置属性的有效值是右上角、左上角、右下角、左下角、中上角、中下角、中心。默认值是 “右上角”。
- Multiple。页面可能包含多个祝酒词组件，需要将特定的信息指向特定的祝酒词。为此，可以使用key属性，以匹配烤面包和信息。
- Clear。该组件有助于通过点击关闭图标来关闭消息，或者可以手动删除。这也可以通过使用消息服务的清除功能以编程方式实现。
- Templates。该组件允许定制内容，其中消息实例可以作为隐含变量访问。
- Properties。该组件通过实现不同的可用属性，为定制烤面包提供各种选项。
- Events。这个组件主要用于回调，当一个消息需要被删除的时候调用。
- style。该组件具有结构风格类的列表，以便为toast组件设计风格。
语法 。创建一个祝酒词，如下所示。
- 导入Toast模块
import {ToastModule} from 'primeng/toast';
- 使用p-toast组件实现它
<p-toast>...</p-toast>
- 显示祝酒词如下。
this.messageService.add({severity:'success',
summary:'New Message',
detail:'GeeksforGeeks'});
创建Angular应用程序和模块安装。
- 使用以下命令创建一个Angular应用程序。
ng new geeks_angular
- 在创建你的项目文件夹（即geeks_angular）后，使用以下命令移动到它。
cd geeks_angular
- 在你给定的目录中安装PrimeNG。
npm install primeng --save
npm install primeicons --save
项目结构：项目结构将如下所示。
例子1 。在下面的例子中，我们在不同的位置有不同的吐司组件。
- app.component.html
<h1 style="color: green;
text-align:center;">
GeeksforGeeks
</h1>
<h3>Angular PrimeNG Toast Component</h3>
<p-toast></p-toast>
<p-toast position="top-left"
key="tl">
</p-toast>
<p-toast position="top-center"
key="tc">
</p-toast>
<p-toast position="bottom-center"
key="bc">
</p-toast>
<h5>Positions</h5>
<div class="card" style="display:flex;
justify-content:space-evenly">
<button type="button" pButton pRipple
(click)="showTopLeft()"
label="Top Left">
</button>
<button type="button" pButton pRipple
(click)="showTopCenter()"
label="Top Center"
class="p-button-warning">
</button>
<button type="button" pButton pRipple
(click)="showBottomCenter()"
label="Bottom Center"
class="p-button-success">
</button>
</div>
- app.component.ts
import { Component } from '@angular/core';
import { MessageService } from 'primeng/api';
import { PrimeNGConfig } from 'primeng/api';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
providers: [MessageService],
})
export class AppComponent {
constructor(
private messageService: MessageService,
private primengConfig: PrimeNGConfig
) { }
ngOnInit() {
this.primengConfig.ripple = true;
}
showTopLeft() {
this.messageService.add({
key: 'tl',
severity: 'info',
summary: 'Info',
detail: 'Message Content',
});
}
showTopCenter() {
this.messageService.add({
key: 'tc',
severity: 'success',
summary: 'Info',
detail: 'Message Content',
});
}
showBottomCenter() {
this.messageService.add({
key: 'bc',
severity: 'warn',
summary: 'Info',
detail: 'Message Content',
});
}
}
- app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule }
from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule }
from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { ButtonModule } from 'primeng/button';
import { ToastModule } from 'primeng/toast';
import { RippleModule } from 'primeng/ripple';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
ToastModule,
ButtonModule,
RippleModule,
FormsModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
输出:
例子2：在下面的例子中，我们的Toast有不同程度的信息严重性。
- app.component.html
<h1 style="color: green;
text-align:center;">
GeeksforGeeks
</h1>
<h3>Angular PrimeNG Toast Component</h3>
<p-toast></p-toast>
<p-toast position="top-left"
key="tl">
</p-toast>
<p-toast position="top-center"
key="tc">
</p-toast>
<p-toast position="bottom-center"
key="bc">
</p-toast>
<h5>Severities</h5>
<div class="card"
style="display:flex;
justify-content:space-evenly">
<button type="button" pButton pRipple
(click)="showSuccess()"
label="Success"
class="p-button-success">
</button>
<button type="button" pButton pRipple
(click)="showInfo()"
label="Info"
class="p-button-info">
</button>
<button type="button" pButton pRipple
(click)="showWarn()"
label="Warn"
class="p-button-warning">
</button>
<button type="button" pButton pRipple
(click)="showError()"
label="Error"
class="p-button-danger">
</button>
</div>
- app.component.ts
import { Component } from '@angular/core';
import { MessageService } from 'primeng/api';
import { PrimeNGConfig } from 'primeng/api';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
providers: [MessageService],
})
export class AppComponent {
constructor(
private messageService: MessageService,
private primengConfig: PrimeNGConfig
) { }
ngOnInit() {
this.primengConfig.ripple = true;
}
showSuccess() {
this.messageService.add({
severity: 'success',
summary: 'Success',
detail: 'Welcome to GeeksforGeeks',
});
}
showInfo() {
this.messageService.add({
severity: 'info',
summary: 'Info',
detail: 'Welcome to GeeksforGeeks',
});
}
showWarn() {
this.messageService.add({
severity: 'warn',
summary: 'Warn',
detail: 'Welcome to GeeksforGeeks',
});
}
showError() {
this.messageService.add({
severity: 'error',
summary: 'Error',
detail: 'Welcome to GeeksforGeeks',
});
}
}
- app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule }
from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule }
from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { ButtonModule } from 'primeng/button';
import { ToastModule } from 'primeng/toast';
import { RippleModule } from 'primeng/ripple';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
ToastModule,
ButtonModule,
RippleModule,
FormsModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
输出:
