基于Cordova构建的Angular安卓应用为何无法识别NFC？

你的核心问题是Angular组件初始化时机早于Cordova插件加载完成：Cordova的原生插件需要等到deviceready事件触发后才会把nfc对象注入到window中，而你的组件构造函数在应用启动时就执行了，此时window.nfc还不存在，导致isNfcSupported被错误设置为false。

解决步骤 #

1. 等待deviceready事件后再检测NFC #

修改组件代码，在ngOnInit中监听Cordova的deviceready事件，事件触发后再获取window.nfc并判断支持状态：

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  isNfcSupported = false;
  tagData: string | undefined;
  scanError: string | undefined;
  private nfcInstance: any;

  ngOnInit() {
    // 监听Cordova设备就绪事件
    document.addEventListener('deviceready', () => {
      this.nfcInstance = (window as any).nfc;
      this.isNfcSupported = !!this.nfcInstance;
    }, false);
  }

  scanNfc() {
    if (!this.isNfcSupported) return;

    // 先移除已有监听，避免重复注册导致多次触发
    this.nfcInstance.removeTagDiscoveredListener(() => {}, () => {});
    
    this.nfcInstance.addTagDiscoveredListener(
      (tag: any) => this.tagData = this.parseTagData(tag),
      (error: string) => this.scanError = error
    );
  }

  private parseTagData(tag: any): string {
    return JSON.stringify(tag);
  }
}

2. 额外排查项 #

• 确认插件安装状态：运行cordova plugin list命令，检查输出中是否包含phonegap-nfc 1.2.0 "NFC"，如果没有，重新执行cordova plugin add phonegap-nfc安装。
• 检查Android权限配置：插件会自动向AndroidManifest.xml添加NFC权限，但可以手动确认是否存在以下配置：

  <uses-permission android:name="android.permission.NFC" />
  <uses-feature android:name="android.hardware.nfc" android:required="false" />
  

• 确保设备NFC已开启：提醒用户检查系统设置中的NFC开关是否打开，即使设备硬件支持，未开启也无法检测到NFC功能。
• 插件兼容性验证：如果上述操作后仍有问题，尝试更新phonegap-nfc插件到最新版本，执行cordova plugin update phonegap-nfc。

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