角度 – 离子3和Ngzone()不起作用
发布时间:2020-12-17 06:59:52 所属栏目:安全 来源:网络整理
导读:我想在蓝牙连接完成后执行一些操作,反之亦然. 处理连接的方案,并添加成功和失败处理程序,并在这些处理程序函数中将标志更改为True和False. 我使用console.log打印了该值,它在组件文件中更改但未反映在 HTML中. 我尝试过使用ngZone,但它没有用. 成功和失败处
我想在蓝牙连接完成后执行一些操作,反之亦然.
处理连接的方案,并添加成功和失败处理程序,并在这些处理程序函数中将标志更改为True和False. 我使用console.log打印了该值,它在组件文件中更改但未反映在 HTML中. 我尝试过使用ngZone,但它没有用. 成功和失败处理代码如下: BluetoothService import { Injectable } from "@angular/core"; import { BLE } from '@ionic-native/ble'; @Injectable() export class BlueToothService { constructor(private ble: BLE){ } public connect = (deviceId,onConnect,onFailure) => { this.ble.isConnected(deviceId) .then(response => { console.log("BlueToothService :: isConnected Function :: success :: device----",response); onConnect(response); },error => { this.ble.connect(deviceId) .subscribe(response => { console.log("BlueToothService :: connect Function :: success :: device----",response); onConnect(response); },error => { console.log("BlueToothService :: connect Function :: error :: device----",error); onFailure(error); }); }); } } 组件文件 import {Component,NgZone} from '@angular/core'; import {Events,IonicPage,NavController,NavParams,ViewController} from 'ionic-angular'; import {BlueToothService} from '../../../providers/bluetooth/bluetooth.service'; @IonicPage() @Component({ selector: 'test-data',templateUrl: 'test-data.html',}) export class AddTestKitDataPage { public isBluetoothConnected: boolean = false; public deviceId: any; public connectToBLE() { this.blueToothService.connect(this.deviceId,onConnectionSuccess,onConnectionFailure); //Assume device id is already present } private onConnectionSuccess = (reason) => { this.zone.run(() => { this.isBluetoothConnected = true; console.log("isBluetoothConnected---",this.isBluetoothConnected); }); }; private onConnectionFailure = (reason) => { this.zone.run(() => { this.isBluetoothConnected = false; console.log("isBluetoothConnected---",this.isBluetoothConnected); }); } } HTML <ion-content> <div text-center *ngIf="!isBluetoothConnected"> Bluetooth Connection failure </div> <div text-center *ngIf="isBluetoothConnected"> Bluetooth Connection success </div> <button ion-button full class="primaryBlockButton" (click)="connectToBLE()">Click</button> </ion-content> 解决方法
由于console.log确实确认在您的情况下数据实际发生了变化,而视图(模板)没有得到更新 – 这暗示没有发生变更检测.
要验证您是否已经尝试过“hack”,并根据您的评论它的工作原理: private onConnectionSuccess = (reason) => { this.zone.run(() => { setTimeout(() => { this.isBluetoothConnected = true; console.log("isBluetoothConnected---",this.isBluetoothConnected); },0) }); }; 基本上,hack将您的数据更改“包装”为Angular选择的异步(setTimeout)活动. 现在要解决它,您可以确保在您的情况下通过Angular自然拾取的事件发生数据更改(例如,添加自定义甚至侦听器). 或者在数据更改后尝试使用更改检测手动检测更改: 导入CDR: import { ChangeDetectorRef } from '@angular/core'; 注入它: constructor (private cdr: ChangeDetectorRef) {} 将其添加到您的方法: private onConnectionSuccess = (reason) => { this.isBluetoothConnected = true; console.log("isBluetoothConnected---",this.isBluetoothConnected); this.cdr.detectChanges(); }; 尝试这种方法,因为我认为它会比黑客更好. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |