介绍
angular2-advanced-notifications 是一个 Angular 2 的通知框架，支持多种通知类型，包括警告、错误、成功和信息。它使用了 Angular Material Design 组件来呈现通知，支持自定义主题配色。
安装
在项目根目录下使用 NPM 进行安装：
npm install angular2-advanced-notifications --save
使用
导入模块
在 app.module.ts 文件中导入 angular2-advanced-notifications 模块：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ------------ - ---- ------------------ ------ - ---------------------- - ---- ---------------------------------- ----------- -------- - -------------- ---------------------- -- ------------- - ------------- -- ---------- -------------- -- ------ ----- --------- - -展开代码
显示通知
在需要显示通知的组件中，使用 NotificationService 来创建和显示通知：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - -------------------- ---------------- - ---- ---------------------------------- ------------ --------- ----------- --------- - ------- ------------------------------------------ - -- ------ ----- ------------ - ------------------- -------------------- -------------------- -- ------------------ - --------------------------------------------- -------- ----------- ----- --------------------- --- - -展开代码
自定义样式
可以通过修改 angular2-advanced-notifications 提供的全局样式表来修改通知框的样式。在 styles.css 文件中添加以下代码：
-- -------------------- ---- ------- ---------------------------- - --------- ------ ---- ----- ------ ----- -------- ----- - ----------------- - ----------------- ------- - --------------------------- - ----------------- ---- - ----------------------------- - ----------------- ------ - -------------------------- - ----------------- ----- -展开代码
API
NotificationService 提供了以下方法和选项：
createNotification(options: NotificationOptions): NotificationRef
创建并显示通知框。
options: NotificationOptions- 通知选项。return: NotificationRef- 通知引用，包含通知的 ID 和清除通知的方法。
clearNotification(id?: string): void
清除指定 ID 的通知框，如果未指定 ID，则清除所有通知框。
id?: string- 要清除的通知框的 ID。
clearAllNotifications(): void
清除所有通知框。
示例代码
以下是一个包含多种通知类型的示例代码：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - -------------------- ---------------- - ---- ---------------------------------- ------------ --------- ----------- --------- - ------- ----------------------------------- ------- --------------------------------- ------- ----------------------------------- ------- -------------------------------- - -- ------ ----- ------------ - ------------------- -------------------- -------------------- -- ------------- - --------------------------------------------- -------- ------- ----- ------------------------- --------- ---- -- - ------ --- - ----------- - --------------------------------------------- -------- ------- ----- ----------------------- --------- ----- -- -- ------ --- - ------------- - --------------------------------------------- -------- ---------- ----- ------------------------- ------------ ----- -- ------- --- - ---------- - --------------------------------------------- -------- ----------- ----- --------------------- --- - -展开代码
总结
angular2-advanced-notifications 是一个功能强大的 Angular 2 的通知框架，支持多种通知类型和自定义样式。它的使用非常简单，在项目中可以方便地使用它来展示各种类型的通知。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600556a181e8991b448d36b3
