极客教程Angular PrimeNG Toast 模板
Angular PrimeNG是一个开源框架，拥有丰富的原生Angular UI组件，可以用来做很好的造型，这个框架用来制作响应式网站非常方便。在这篇文章中，我们将学习如何在Angular PrimeNG中使用Toast Template。我们还将学习一些属性，以及在代码中使用的语法。
Toast组件是一个用于叠加具有特别严重性的反馈信息的工具。
创建Angular应用程序和模块安装。
第1步：使用以下命令创建一个Angular应用程序。
ng new appname
第2步：创建你的项目文件夹即appname后，使用以下命令移动到它。
cd appname
第3步在你给定的目录中安装PrimeNG。
npm install primeng --save
npm install primeicons --save
项目结构：它将看起来像如下。
- 要运行上述文件，请运行以下命令。
ng serve --save
示例1：下面是说明使用Angular PrimeNG Toast Template的示例代码。
- app.component.html:
<p-toast position="top-center"
key="gfg"
(onClose)="reject()">
<ng-template let-message pTemplate="message">
<div class="p-flex p-flex-column">
<div class="p-text-center">
<i class="pi pi-exclamation-triangle"
style="font-size: 4rem"></i>
<h4>{{ message.summary}}</h4>
<p>{{ message.detail}}</p>
</div>
<div class="p-grid p-fluid">
<div class="p-col-6">
<button type="button" pButton
(click)="confirm()"
label="✔"
class="p-button-success">
</button>
</div>
<div class="p-col-6">
<button type="button" pButton
(click)="reject()"
label="✘"
class="p-button-danger">
</button>
</div>
</div>
</div>
</ng-template>
</p-toast>
<h1 style="color: green">GeeksforGeeks</h1>
<h5>Angular PrimeNG Toast Template</h5>
<button type="button" pButton pRipple
(click)="ConfirmBox()"
label="GeeksforGeeks"
icon="pi pi-code">
</button>
- app.component.ts:
import { Component } from '@angular/core';
import { MessageService } from 'primeng/api';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
providers: [MessageService],
})
export class AppComponent {
constructor(
private messageService: MessageService,
) { }
ConfirmBox() {
this.messageService.add({
key: 'gfg',
sticky: true,
severity: 'info',
summary: 'Hey Geek, are you sure?',
});
}
confirm() {
this.messageService.clear('gfg');
}
reject() {
this.messageService.clear('gfg');
}
clear() {
this.messageService.clear();
}
}
- 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：下面是另一个示例代码，说明了Angular PrimeNG Toast Template的使用。
- app.component.html:
<p-toast position="top-center"
key="gfg"
(onClose)="reject()">
<ng-template let-message pTemplate="message">
<div class="p-flex p-flex-column">
<div class="p-text-center">
<i class="pi pi-exclamation-triangle"
style="font-size: 4rem">
</i>
<h4>{{ message.summary}}</h4>
<p>{{ message.detail}}</p>
</div>
<div class="p-grid p-fluid">
<div class="p-col-6">
<button type="button" pButton
(click)="confirm()"
label="✔"
class="p-button-success">
</button>
</div>
<div class="p-col-6">
<button type="button" pButton
(click)="reject()"
label="✘"
class="p-button-danger">
</button>
</div>
</div>
</div>
</ng-template>
</p-toast>
<h1 style="color: green">GeeksforGeeks</h1>
<h5>Angular PrimeNG Toast Template</h5>
<button type="button" pButton pRipple
(click)="ConfirmBox()"
label="GeeksforGeeks"
icon="pi pi-code">
</button>
- app.component.ts:
import { Component } from '@angular/core';
import { MessageService } from 'primeng/api';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
providers: [MessageService],
})
export class AppComponent {
constructor(
private messageService: MessageService,
) { }
ConfirmBox() {
this.messageService.addAll([
{
key: 'gfg', severity: 'success',
summary: 'Hey Geek, are you sure?'
},
{
key: 'gfg', severity: 'info',
summary: 'Hey Geek, are you sure?'
},
]);
}
confirm() {
this.messageService.clear('gfg');
}
reject() {
this.messageService.clear('gfg');
}
clear() {
this.messageService.clear();
}
}
- 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 { }
输出:
