我在将实际的 Ionic Angular 与 NFC 读取器结合使用时遇到问题。
我可以使用以下提供的示例成功读取 NFC 标签：
https://ionicframework.com/docs/native/nfc
我遇到的问题是，在读取 NFC 后，Angular ChangeDetection 被破坏并且不显示更改。当我单击一个不执行任何操作的按钮时，会显示更改。
我知道我可以手动触发 ChangeDetection，这会起作用，但随后我必须在组件中的任何地方触发 ChangeDetection，我认为不应该是这样。
有人知道我做错了什么吗？
首先我认为它可能与可观察值有关，但我尝试添加一个区间可观察值，它的工作原理与预期的一样。
模板：
<p><ion-button (click)="startNFC()">start NFC readermode</ion-button></p>
<p><ion-button (click)="startNFCListener()">start NFC listener</ion-button></p>
<p><ion-button (click)="startInterval()">start Interval</ion-button></p>
<p><ion-button (click)="doNothing()">do nothing</ion-button></p>
<p>
{{nfcReading}}
{{nfcTag}}
<ion-spinner *ngIf="nfcReading"> </ion-spinner>
</p>
代码：
startNFC() {
console.log("startNFC");
this.nfcReading = true;
let flags = this.nfc.FLAG_READER_NFC_A | this.nfc.FLAG_READER_NFC_V;
this.readerModeSub = this.nfc.readerMode(flags).subscribe(
tag => {
console.log(JSON.stringify(tag));
this.nfcTag = this.nfc.bytesToHexString(tag.id);
this.nfcReading = false;
this.readerModeSub.unsubscribe();
},
err => {
console.log("Error reading tag", err);
this.nfcReading = false;
}
);
}
doNothing() {
// this really does nothing... it is just to demonstrate that this triggers the changedetection
}
我可以看到订阅事件在控制台中被触发，但它没有显示在 HTML 中。 单击“不执行任何操作”按钮时。显示标签。
我创建了一个新的 type=angular 空白项目并在 Google Pixel 3a 硬件上进行测试。
我上传了一个示例项目来演示我的问题。 https://github.com/autlunatic/Ionic-NFC-Android-Test/
我想答案就在文档中。 您需要在 ngZone 内运行侦听器。
https://capacitorjs.com/docs/guides/angular#ngzone
Network.addListener("networkStatusChange", (status) => {
this.ngZone.run(() => {
// This code will run in Angular's execution context
this.networkStatus = status.connected ? "Online" : "Offline";
});
});