Angular学习之notification「自定义服务」-猿码集

1. 概述

Angular 为我们提供了多种自定义服务的方式，本文将介绍如何通过自定义服务实现 notification 功能。notification 是一个非常普遍的功能，无论是网站还是应用程序通常都会使用，通过本文的学习，读者将了解到如何通过自定义服务方便快捷的实现 notification 功能。

2. 创建自定义服务

2.1 导入 Injectable

我们可以通过 @Injectable 装饰器来创建自定义服务，因此我们需要首先导入 Injectable：


import { Injectable } from '@angular/core';

2.2 创建服务

创建一个新的文件 notification.service.ts，并定义一个名为 NotificationService 的类，然后通过 @Injectable 装饰器来标注它，这样 Angular 就会知道并允许我们将它注入到组件中。


@Injectable({
  providedIn: 'root'
})
export class NotificationService {
  
}

2.3 添加 notification 方法

现在，我们需要在 NotificationService 中添加一个方法来处理 notification 操作，我们可以通过 RxJS 的 BehaviorSubject 来实现这个功能。


import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable({
  providedIn: 'root'
})
export class NotificationService {
  private subject = new BehaviorSubject('');
  notifications = this.subject.asObservable();
  
  notify(message: string) {
    this.subject.next(message);
  }
}

以上代码中，我们创建了一个名为 subject 的 BehaviorSubject 对象。随后，我们通过 notifications 属性将 subject 转换成了 Observables 类型，这样一来，我们就可以在任何组件中订阅到这个通知。

最后，我们添加了一个名为 notify 的方法来产生这个通知，并在这个方法中将 message 发送给我们的 subject 订阅者，这样就可以在所有的订阅者中传递通知了。

3. 在组件中使用服务

通过 NotificationService，你可以发送任何通知并在任何 Angular 组件中订阅这些通知。

3.1 添加服务

我们可以将 NotificationService 注入到组件中。在组件的构造函数中添加以下代码：


constructor(private notificationService: NotificationService) { }

3.2 发送通知

现在，我们可以在组件代码中使用 notificationService 来发送消息。


showSuccess() {
  this.notificationService.notify('成功通知');
}
showError() {
  this.notificationService.notify('错误通知');
}

3.3 订阅通知

在组件中我们需要添加代码，来订阅通知，当这个通知被发送时，通知组件将会获取这个信息并展示给用户。


export class NotificationComponent implements OnInit {
  message: string;
  constructor(private notificationService: NotificationService) { }
  ngOnInit(): void {
    this.notificationService.notifications.subscribe(message => 
      this.message = message
    );
  }
}

在以上代码中，我们创建了一个名为 NotificationComponent 的组件，并在它的 ngOnInit 方法中订阅了 NotificationService 的 notifications 属性。当 NotificationService 中的 notify 方法被调用时，通知组件就会订阅到这个通知并展示给用户。

4. 总结

本文介绍了如何使用 Angular 自定义服务来实现 notification 功能，主要步骤有：

通过 @Injectable 装饰器来创建自定义服务；

在服务中添加 notification 方法；

将服务注入到组件中；

发送通知并在组件中订阅通知。

通过本文的学习，我们可以方便快捷地实现 notification 功能，并且可以在不同的组件中展示相同的通知信息。

Angular学习之notification「自定义服务」