Ionic 4导入NFC、Ndef组件提示无提供者的问题求助

你遇到的核心问题是Angular依赖注入找不到Ndef/NFC服务的提供者，同时还有导入路径的小细节需要注意，我来一步步帮你搞定：

1. 确认导入路径的正确性 #

你提到尝试用@ionic-native/nfc代替@ionic-native/nfc/ngx但找不到模块——这是正常的，因为Ionic 4+对应的@ionic-native插件都是基于Angular构建的，必须使用/ngx后缀的导入路径，所以你home.page.ts里的导入写法是对的，不要改回去。

2. 解决NullInjectorError：注册服务提供者 #

这个错误的本质是你没有在Angular模块中注册NFC和Ndef服务，导致依赖注入系统找不到它们。你需要在app.module.ts中完成这一步：

打开src/app/app.module.ts，添加以下代码：

// 在文件顶部导入NFC和Ndef
import { NFC, Ndef } from '@ionic-native/nfc/ngx';

// 在@NgModule的providers数组中添加这两个服务
@NgModule({
  // ...其他已有的代码
  providers: [
    StatusBar,
    SplashScreen,
    NFC, // 添加这一行
    Ndef, // 添加这一行
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  // ...其他已有的代码
})
export class AppModule {}

3. 确保依赖版本匹配 #

你的Ionic CLI是5.2.8，对应的@ionic-native插件应该是5.x版本，如果你之前安装的版本不对，可能会有兼容性问题。可以重新安装正确的版本：

# 先卸载旧版本（如果有的话）
npm uninstall @ionic-native/nfc @ionic-native/core
# 安装5.x版本的插件和核心依赖
npm install @ionic-native/nfc@5 @ionic-native/core@5 --save
# 确保Cordova插件已正确安装
ionic cordova plugin add cordova-plugin-nfc

4. 实现NFC读写清的示例代码 #

在你的home.page.ts中，你可以添加这些方法来实现核心功能：

import { Component } from '@angular/core';
import { NFC, Ndef } from "@ionic-native/nfc/ngx";

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor(private nfc: NFC, private ndef: Ndef) {}

  // 启动NFC标签监听
  startNFCListener() {
    this.nfc.addNdefListener(() => {
      console.log('NFC监听已启动');
    }, (err) => {
      console.error('启动NFC监听失败:', err);
    }).subscribe((event) => {
      console.log('检测到NFC标签:', event);
      if (event.tag?.ndefMessage) {
        const decodedMsg = this.ndef.decodeMessage(event.tag.ndefMessage);
        console.log('解析后的NDEF消息:', decodedMsg);
        // 这里可以把读取到的内容展示到页面上
      }
    });
  }

  // 写入内容到NFC标签
  writeToNFC() {
    // 创建一个文本类型的NDEF记录
    const textRecord = this.ndef.textRecord('你好，来自Ionic的NFC消息！');
    this.nfc.write([textRecord])
      .then(() => console.log('NFC标签写入成功'))
      .catch(err => console.error('写入失败:', err));
  }

  // 清除NFC标签内容
  clearNFC() {
    this.nfc.clear()
      .then(() => console.log('NFC标签已清空'))
      .catch(err => console.error('清空失败:', err));
  }
}

重要注意事项 #

• 必须在真实设备上测试：NFC功能无法在浏览器或模拟器中工作，你需要用Android或iOS真机测试，并且确保设备的NFC功能已开启。
• 检查Cordova插件是否安装成功：运行ionic cordova plugin list，确认cordova-plugin-nfc在列表中。

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