多方位解锁Message消息提示服务实现，打造完善交互体验

2024-02-19 10:28:14

内容

消息提示组件 Message 是一种轻量级提示方式，常用于主动操作后的反馈提示。它可以帮助用户及时了解操作结果，以便更好地进行后续操作。本文将从组件服务实现的角度，解析其源代码，帮助您更好地理解和使用 Message，优化您的交互体验。

组件结构

Message 组件主要包括两个部分：

MessageService：负责管理消息的显示和隐藏。
MessageComponent：负责渲染消息内容。

服务实现

MessageService 服务主要负责以下几个方面：

消息的创建和销毁。
消息的显示和隐藏。
消息的更新。

export class MessageService {

  // 消息列表
  private messages: Message[] = [];

  // 创建消息
  create(message: Message): void {
    this.messages.push(message);
  }

  // 销毁消息
  destroy(message: Message): void {
    this.messages = this.messages.filter(item => item !== message);
  }

  // 显示消息
  show(message: Message): void {
    message.isVisible = true;
  }

  // 隐藏消息
  hide(message: Message): void {
    message.isVisible = false;
  }

  // 更新消息
  update(message: Message): void {
    const index = this.messages.findIndex(item => item === message);
    if (index !== -1) {
      this.messages[index] = message;
    }
  }

  // 获取消息列表
  getMessages(): Message[] {
    return this.messages;
  }
}

组件渲染

MessageComponent 组件主要负责渲染消息内容。它通过订阅 MessageService 服务的事件，来获取最新消息并进行渲染。

export class MessageComponent implements OnInit, OnDestroy {

  // 消息列表
  messages: Message[] = [];

  // 订阅消息服务
  private subscription: Subscription;

  ngOnInit(): void {
    this.subscription = this.messageService.getMessages().subscribe(messages => {
      this.messages = messages;
    });
  }

  ngOnDestroy(): void {
    this.subscription.unsubscribe();
  }
}

使用方式

// 导入 MessageService
import { MessageService } from './message.service';

// 在组件中使用
export class MyComponent {

  constructor(private messageService: MessageService) {}

  // 创建消息
  createMessage(): void {
    const message = new Message();
    message.content = 'Hello world!';
    this.messageService.create(message);
  }

  // 销毁消息
  destroyMessage(message: Message): void {
    this.messageService.destroy(message);
  }

  // 显示消息
  showMessage(message: Message): void {
    this.messageService.show(message);
  }

  // 隐藏消息
  hideMessage(message: Message): void {
    this.messageService.hide(message);
  }

  // 更新消息
  updateMessage(message: Message): void {
    this.messageService.update(message);
  }
}