推送通知的Angular 2组件 - ng2-notifications
ng2-notifications 是一个强大的Angular 2+ 开源组件,它利用了Web的Notifications API,允许你的应用在用户切换标签或专注于其他应用程序时,也能显示系统级别的推送通知。这款组件设计简洁,兼容现有的各种操作系统和浏览器的通知系统。
在线演示与快速启动
想立即体验?点击这里查看在线演示。
要在自己的项目中快速启用ng2-notifications,只需执行以下步骤:
$ npm install ng2-notifications --save
接着,在你的App模块中引入并使用该组件:
import { PushNotificationComponent } from 'ng2-notifications/ng2-notifications';
@Component({
selector: 'my-app',
template: `
<push-notification
title="ng2-notifications"
body="Component for Native Push Notifications"
icon="https://goo.gl/3eqeiE">
</push-notification>
`,
directives: [PushNotificationComponent]
})
使用方法
基础的推送通知可以通过设置标题、内容和图标属性来创建,如下所示:
<push-notification
title="ng2-notifications"
body="Component for Native Push Notifications"
icon="https://goo.gl/3eqeiE">
</push-notification>
若要实现数据绑定,可以这样做:
<push-notification
[title]="notification.title"
[body]="notification.description"
[icon]="notification.icon">
</push-notification>
自动关闭
通过设置closeDelay
属性,你可以让通知在指定时间后自动关闭。例如,下面的例子将在5秒后自动关闭:
<push-notification
...
closeDelay="5000">
</push-notification>
控制何时触发通知
通过添加模板变量并在事件上调用.show()
方法,你可以控制何时展示通知:
<push-notification #notification
...
(load)="notification.show()">
</push-notification>
点击事件处理
给通知添加点击事件处理器,只需要使用(action)
事件:
<push-notification
...
(action)="myFunction($event)">
</push-notification>
显示和关闭事件
监听通知的显示和关闭事件,可以为它们添加回调函数:
<push-notification
...
(show)="myShowFunction($event)"
(close)="myCloseFunction($event)">
</push-notification>
错误事件
当遇到错误时,可通过(error)
事件进行处理:
<push-notification
...
(error)="handleError($event)">
</push-notification>
其他选项
此外,还有更多自定义选项可供选择,比如data
、tag
、dir
(默认值:'auto')以及lang
(默认值:'en-US')。
浏览器支持
查看完整的浏览器兼容性列表。请注意,有些特性仍处于建议阶段,或者目前尚未被所有浏览器支持,如renotify
、silent
、sound
、vibrate
、sticky
和 noscreen
。另外,如果你在Chrome的隐私浏览模式下,将无法收到通知。
许可证
本项目采用MIT许可证,详情见LICENSE 文件。
版权 © 2017 Alex Castillo
许可在此明确授予,无需付费,任何个人或实体均可获得一份本软件及其相关文档的副本,不受限制地使用、复制、修改、合并、发布、分发、转授权和/或销售本软件的副本,以及允许为其接收软件的人员这样做,但须遵守以下条件:
上述版权声明和许可通知应包含在本软件的所有副本或实质部分中。
本软件提供“原样”状态,不附带任何形式的明示或暗示保证,包括但不限于对适销性、特定用途适用性和非侵权性的保证。在任何情况下,作者或版权持有者都不应对因使用、不能使用本软件所产生的直接、间接、偶然、特殊、惩罚性或后果性损害承担责任,即使已被告知可能出现此类损害。
鸿蒙开发工具大赶集
本仓将收集和展示鸿蒙开发工具,欢迎大家踊跃投稿。通过pr附上您的工具介绍和使用指南,并加上工具对应的链接,通过的工具将会成功上架到我们社区。012hertz
Go 微服务 HTTP 框架,具有高易用性、高性能、高扩展性等特点。Go01每日精选项目
🔥🔥 每日精选已经升级为:【行业动态】,快去首页看看吧,后续都在【首页 - 行业动态】内更新,多条更新哦~🔥🔥 每日推荐行业内最新、增长最快的项目,快速了解行业最新热门项目动态~~029kitex
Go 微服务 RPC 框架,具有高性能、强可扩展的特点。Go00Cangjie-Examples
本仓将收集和展示高质量的仓颉示例代码,欢迎大家投稿,让全世界看到您的妙趣设计,也让更多人通过您的编码理解和喜爱仓颉语言。Cangjie057毕方Talon工具
本工具是一个端到端的工具,用于项目的生成IR并自动进行缺陷检测。Python040PDFMathTranslate
PDF scientific paper translation with preserved formats - 基于 AI 完整保留排版的 PDF 文档全文双语翻译,支持 Google/DeepL/Ollama/OpenAI 等服务,提供 CLI/GUI/DockerPython06mybatis-plus
mybatis 增强工具包,简化 CRUD 操作。 文档 http://baomidou.com 低代码组件库 http://aizuda.comJava03国产编程语言蓝皮书
《国产编程语言蓝皮书》-编委会工作区018- DDeepSeek-R1探索新一代推理模型,DeepSeek-R1系列以大规模强化学习为基础,实现自主推理,表现卓越,推理行为强大且独特。开源共享,助力研究社区深入探索LLM推理能力,推动行业发展。【此简介由AI生成】Python00
热门内容推荐
最新内容推荐
项目优选









