加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

角度 – 离子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();
};

尝试这种方法,因为我认为它会比黑客更好.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读