Angular利用service实现自定义服务「notification」

1. 什么是Angular service

在Angular中，服务是一种可以在Angular应用程序中共享数据和业务逻辑的实体。您可以在组件之间或通过HTTP请求共享它们。实际上，服务是Angular框架和应用程序的基础。使用服务，我们可以避免重复的代码，将业务逻辑从组件中抽象出来。以下示例是如何创建一个Angular服务的示例 《Angular官方文档》：

import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root',
})
export class MyService {
  constructor(private api: ApiService) {}
  getValue() {
    return this.api.getValue();
  }
}

2. 创建一个notification服务

2.1 创建服务

要创建Angular服务，请先使用 @Injectable() 装饰器在其上下文中的类上定义它。这个装饰器告诉Angular该类将作为一个服务，在整个应用程序中可以注入到其他组件、指令或服务中。

下面的代码是如何创建notification服务的示例：

import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root',
})
export class NotificationService {
  private _messages: string[] = [];
  add(message: string) {
    this._messages.push(message);
  }
  clear() {
    this._messages = [];
  }
  get messages() {
    return this._messages;
  }
}

代码解释：

从上面的代码可以看出，我们创建了一个服务，这个服务包含了三个方法：

add(): 添加消息到消息列表;

clear(): 清除消息列表;

messages(): 获取消息列表;

同时我们定义了一个类变量_messages，它用来记录所有添加进来的消息。

2.2 注入服务到组件中

一旦创建出服务之后，就需要注入到Angular应用程序的组件或另一服务中，以便使用它的功能。

以下是如何将notification服务注入到AppComponent组件中的代码：

import { Component } from '@angular/core';
import { NotificationService } from './notification.service';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private notificationService: NotificationService) {}
  get messages() {
    return this.notificationService.messages;
  }
}

到这里，就完成了服务的注入。

3. 使用服务展示通知信息

在前面的章节，我们已经创建了notification服务，并将其注入到AppComponent组件中。现在，我们需要在界面上展示收到的消息。以下是如何使用notification服务来展示通知信息的代码：

import { Component } from '@angular/core';
import { NotificationService } from './notification.service';
@Component({
  selector: 'app-root',
  template: `
    

      {{ message }}
    

  `,
})
export class AppComponent {
  constructor(private notificationService: NotificationService) {}
  get messages() {
    return this.notificationService.messages;
  }
}

代码解释：

在上面的代码中，使用了Angular的内置指令*ngFor来循环遍历所有通知信息。我们定义了一个messages的getter方法，用来返回notification服务中所有的消息。通过在模板上调用这个getter方法，我们就可以循环展示所有的通知信息了。

4. 发送消息到notification服务

最后，我们需要向notification服务发送消息。以下是如何在组件中发送消息到notification服务的示例代码：

import { Component } from '@angular/core';
import { NotificationService } from './notification.service';
@Component({
  selector: 'app-new-message',
  template: `
    
    Add
  `,
})
export class NewMessageComponent {
  constructor(private notificationService: NotificationService) {}
  message = '';
  addMessage() {
    this.notificationService.add(this.message);
    this.message = '';
  }
}

代码解释：

在上面的代码中，我们创建了一个addMessage()方法，这个方法会在用户点击"Add"按钮时调用。该方法会从界面上获取消息内容并将其推送到notification服务中，并将输入框清空。

总结

在本文中，我们学习了如何利用Angular service实现一个通知服务notification。我们学习了如何创建服务、注入服务到组件中，在组件中展示通知信息，以及如何向notification服务发送消息。服务是Angular框架和应用程序的基础。使用服务，可以避免重复的代码，将业务逻辑从组件中抽象出来。