如何在Angular中实现Metamask EventEmitter的集成使用？

1. 核心错误：事件名称拼写错误 #

Metamask官方提供的账户变更事件名为accountsChanged，你代码中使用的accountsChange缺少末尾的d，导致事件监听根本没有注册到正确的事件上，自然收不到任何回调。

2. 次要问题：Angular变更检测未触发 #

Metamask的事件回调是在Angular的NgZone执行上下文之外触发的，就算你修正了事件名能收到回调，直接给组件属性赋值也不会触发Angular的变更检测，会出现控制台有输出但页面绑定值不更新的问题，需要用NgZone.run把赋值逻辑包裹起来，强制触发变更检测。

3. 必要补充项 #

• 要先判断window.ethereum是否存在，避免用户未安装Metamask时抛出引用错误
• 不要在构造函数中执行业务监听逻辑，放到ngOnInit生命周期钩子中更符合Angular开发规范
• 组件销毁时需要主动移除事件监听，避免内存泄漏
• 必须先调用eth_requestAccounts方法向用户发起钱包连接授权，否则Metamask不会向当前站点推送任何账户变更事件

完整可运行代码示例 #

import { Component, OnInit, OnDestroy, NgZone } from '@angular/core';

// 声明window上的ethereum对象，避免TS类型报错
declare global {
  interface Window {
    ethereum?: any;
  }
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
  currentAccount: string = '';
  private accountChangeHandler?: (...args: any[]) => void;

  constructor(private ngZone: NgZone) {}

  ngOnInit(): void {
    // 检测Metamask是否安装
    if (!window.ethereum) {
      console.warn('未检测到Metamask钱包插件');
      return;
    }

    // 可在此处先调用eth_requestAccounts请求连接钱包，否则收不到事件推送
    // window.ethereum.request({ method: 'eth_requestAccounts' }).then(accounts => {
    //   this.currentAccount = accounts[0]
    // })

    // 注册正确的事件监听
    this.accountChangeHandler = (accounts: string[]) => {
      this.ngZone.run(() => {
        console.log('当前账户列表：', accounts);
        this.currentAccount = accounts.length ? accounts[0] : '';
      })
    }
    window.ethereum.on('accountsChanged', this.accountChangeHandler);
  }

  ngOnDestroy(): void {
    // 组件销毁时移除监听
    if (window.ethereum && this.accountChangeHandler) {
      window.ethereum.removeListener('accountsChanged', this.accountChangeHandler);
    }
  }
}

内容的提问来源于stack exchange，提问作者fahadh4ilyas