极客教程Angular PrimeNG快速拨号事件
Angular PrimeNG是一个开源的库，由原生的Angular UI组件组成，用来进行伟大的造型，这个框架被用来制作响应式网站，非常容易。在这篇文章中，我们将看到Angular PrimeNG速拨事件。
快速拨号组件在页面上显示一个浮动的动作按钮，当按下时显示出用户可以执行的多个主要动作。SpeedDial组件总共有4个事件。
Angular PrimeNG快速拨号事件：
- onVisibleChange:这个事件接受一个回调，当元素的可见性改变时，回调会被调用。
- onClick。这个事件接受一个回调，在按钮元素被点击时被调用。
- onShow:这个事件接受一个回调，当快速拨号的动作被显示时，回调就会被调用。
- onHide:这个事件接受一个回调，当快速拨号动作被隐藏时，这个回调会被调用。
语法:
<p-speedDial
[model]="actions"
...
**(event-name)="callback()"** >
</p-speedDial>
创建Angular应用程序并安装模块：
第1步：使用以下命令创建一个Angular应用程序。
ng new appname
第2步：创建你的项目文件夹即appname后，使用以下命令移动到它。
cd appname
第3步：最后，在你给定的目录中安装PrimeNG。
npm install primeng --save
npm install primeicons --save
项目结构：在完成上述步骤后，项目结构将看起来像这样。
Project Structure
例子1：在这个例子中，我们使用了快速拨号的onVisibleChange和onClick事件，并在这些事件被触发时使用Toast Message来通知用户。
- app.component.html
<h2 style="color: green">GeeksforGeeks</h2>
<h3>
Angular PrimeNG Form
SpeedDial Events Component
</h3>
<p-speedDial className="mt-8"
[model]="actions"
(onVisibleChange)="handleVisibleChange()"
(onClick)="handleClick()"
type="semi-circle"
direction="right">
</p-speedDial>
<p-toast></p-toast>
- app.component.ts:
import { Component } from '@angular/core';
import { MenuItem, MessageService } from 'primeng/api';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
providers: [MessageService]
})
export class AppComponent {
constructor(private msgs: MessageService) { }
actions: MenuItem[] = []
ngOnInit() {
this.actions = [
{
icon: 'pi pi-bell',
command: () => {
this.msgs.add({
severity: 'info',
summary: 'Notifications Opened',
detail: 'GeeksforGeeks'
});
}
},
{
icon: 'pi pi-bookmark',
command: () => {
this.msgs.add({
severity: 'success',
summary: 'Page Bookmarked',
detail: 'GeeksforGeeks'
});
}
},
{
icon: 'pi pi-cog',
command: () => {
this.msgs.add({
severity: 'warn',
summary: 'Settings Opened',
detail: 'GeeksforGeeks'
});
}
},
{
icon: 'pi pi-home',
command: () => {
this.msgs.add({
severity: 'success',
summary: 'Home Clicked',
detail: 'GeeksforGeeks'
});
}
},
];
}
handleVisibleChange() {
this.msgs.add({
severity: 'success',
summary: 'onVisibleChange Event Fired',
detail: 'GeeksforGeeks'
});
}
handleClick() {
this.msgs.add({
severity: 'info',
summary: 'onClick Event Fired',
detail: 'GeeksforGeeks'
});
}
}
- app.module.ts:
import { NgModule } from '@angular/core';
import { BrowserModule }
from '@angular/platform-browser';
import { BrowserAnimationsModule }
from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { SpeedDialModule } from 'primeng/speeddial';
import { ToastModule } from 'primeng/toast';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
SpeedDialModule,
ToastModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule { }
输出:
例子2：这个例子显示了SpeedDial组件的onShow和onHide事件的使用。
- app.component.html:
<h2 style="color: green">GeeksforGeeks</h2>
<h3>
Angular PrimeNG Form
SpeedDial Events Component
</h3>
<p-speedDial className="mt-8"
[model]="actions"
(onShow)="handleShow()"
(onHide)="handleHide()"
type="semi-circle"
direction="right">
</p-speedDial>
<p-toast></p-toast>
- app.component.ts
import { Component } from '@angular/core';
import { MenuItem, MessageService } from 'primeng/api';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
providers: [MessageService]
})
export class AppComponent {
constructor(private msgs: MessageService) { }
actions: MenuItem[] = []
ngOnInit() {
this.actions = [
{
icon: 'pi pi-bell',
command: () => {
this.msgs.add({
severity: 'info',
summary: 'Notifications Opened',
detail: 'GeeksforGeeks'
});
}
},
{
icon: 'pi pi-bookmark',
command: () => {
this.msgs.add({
severity: 'success',
summary: 'Page Bookmarked',
detail: 'GeeksforGeeks'
});
}
},
{
icon: 'pi pi-cog',
command: () => {
this.msgs.add({
severity: 'warn',
summary: 'Settings Opened',
detail: 'GeeksforGeeks'
});
}
},
{
icon: 'pi pi-home',
command: () => {
this.msgs.add({
severity: 'success',
summary: 'Home Clicked',
detail: 'GeeksforGeeks'
});
}
},
];
}
handleShow() {
this.msgs.add({
severity: 'success',
summary: 'onShow Event Fired',
detail: 'Actions Shown'
});
}
handleHide() {
this.msgs.add({
severity: 'error',
summary: 'onHide Event Fired',
detail: 'Actions Hidden'
});
}
}
- app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule }
from '@angular/platform-browser';
import { BrowserAnimationsModule }
from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { SpeedDialModule } from 'primeng/speeddial';
import { ToastModule } from 'primeng/toast';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
SpeedDialModule,
ToastModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule { }
输出:
