使用NgZone更新组件视图

Question

我有一个组件的结构

-stats
 -stats.component.ts
 -stats.component.html
 -stats.component.css

我需要使用更新stats.component.ts/html文件中的myData对象，以便当rpm、速度或任何值在firebase控制台中更新时，它应该反映在本地文本应用程序的component视图中。我希望firebase.service.ts中监视器函数中的result.value对象存储在mydata对象中。

火力控制台截图

stats.component.html

<ActionBar title="Car Statistics">

</ActionBar>


<GridLayout class="paramsView" rows="auto,auto,auto,auto,auto" columns="*,*" width="auto" height="500" backgroundColor="red" >
         <Label row="0" col="0" class="h3" text="Name: " textWrap="true"></Label>        
        <Label row="0" col="1" class="h3" [text]="mydata.name" textWrap="true"></Label>

        <Label row="1" col="0" class="h3" text="RPM: " textWrap="true"></Label>        
        <Label row="1" col="1" class="h3" [text]="mydata.rpm" textWrap="true"></Label>

        <Label row="2" col="0" class="h3" text="Vehicle Speed: " textWrap="true"></Label>        
        <Label row="2" col="1" class="h3" [text]="mydata.speed" textWrap="true"></Label>

        <Label row="3" col="0" class="h3" text="Coolant Temperature: " textWrap="true"></Label>        
        <Label row="3" col="1" class="h3" [text]="mydata.coolantTemp" textWrap="true"></Label>

        <!-- <Label row="4" col="0" class="h3" text="Coolant Temperature: " textWrap="true"></Label> -->
        <Label row="4" col="1" class="h3" [text]="mydata.value" textWrap="true"></Label>


</GridLayout>

stats.component.ts

import { Component, OnInit,Inject, NgZone, DoCheck  } from '@angular/core';
import {registerElement} from 'nativescript-angular/element-registry';
import {DataService} from "../services/firebase.service";
import * as firebase from "nativescript-plugin-firebase";



@Component({
    moduleId:module.id,
    templateUrl: "./stats.component.html",
    styleUrls: ['stats.component.css']
})


export class StatsComponent implements OnInit, DoCheck {

    private mydata;
    private val;


    constructor(private dataService:DataService,
     private zone: NgZone

    ){

    }

    ngOnInit(){

        this.dataService.firebaseInit();

        Here i will call the value/childListener from my firebase.service.ts;
        this.dataService.monitor();

    }

    ngDoCheck() {
        console.log("Change detection encountered!")
    }




}

firebase.service.ts

import { Injectable, NgZone } from "@angular/core";
import { Observable as RxObservable } from "rxjs/Observable";
import { HttpClient, HttpHeaders, HttpResponse } from "@angular/common/http";
import "rxjs/add/operator/map";
import "rxjs/add/operator/do";
import * as firebase from "nativescript-plugin-firebase";


@Injectable()
export class DataService {

    constructor(

    ) { }

    firebaseInit() {

        return firebase.init({
        }).then(
            () => {
                // console.log("initialized");

            }
            ).catch(
            (err) => { console.log("Error is: " + err) }
            )

    }



  monitor(){
            let str = '5C:CF:7F:B3:07:0E/17-04-2018/11-35/';
            var onValueEvent = function (result) {         

                 console.log("Event type: " + result.type);
                 console.log("Key: " + result.key);
                 console.log("Value: " + JSON.stringify(result.value));
                 JSON.stringify(result.value);
            };
            return firebase.addValueEventListener(onValueEvent, '/CarData/'+ str).then(
                function (listenerWrapper) {
                    var path = listenerWrapper.path;
                    var listeners = listenerWrapper.listeners; // an Array of listeners added
                    // you can store the wrapper somewhere to later call 'removeEventListeners'
                }
            );

     }

Answer 1

您可以将回调函数直接传递给firebase.motitor函数。当调用它时，您可以将result.value分配给zone.run()中的mydata变量。

stats.component.html

<ActionBar title="Car Statistics">

</ActionBar>


<GridLayout class="paramsView" rows="auto,auto,auto,auto,auto" columns="*,*" width="auto" height="500" backgroundColor="red" >
         <Label row="0" col="0" class="h3" text="Name: " textWrap="true"></Label>        
        <Label row="0" col="1" class="h3" [text]="mydata.name" textWrap="true"></Label>

        <Label row="1" col="0" class="h3" text="RPM: " textWrap="true"></Label>        
        <Label row="1" col="1" class="h3" [text]="mydata.rpm" textWrap="true"></Label>

        <Label row="2" col="0" class="h3" text="Vehicle Speed: " textWrap="true"></Label>        
        <Label row="2" col="1" class="h3" [text]="mydata.speed" textWrap="true"></Label>

        <Label row="3" col="0" class="h3" text="Coolant Temperature: " textWrap="true"></Label>        
        <Label row="3" col="1" class="h3" [text]="mydata.coolantTemp" textWrap="true"></Label>

        <!-- <Label row="4" col="0" class="h3" text="Coolant Temperature: " textWrap="true"></Label> -->
        <Label row="4" col="1" class="h3" [text]="mydata.value" textWrap="true"></Label>


</GridLayout>

stats.component.ts

import { Component, OnInit,Inject, NgZone, DoCheck  } from '@angular/core';
import {registerElement} from 'nativescript-angular/element-registry';
import {DataService} from "../services/firebase.service";
import * as firebase from "nativescript-plugin-firebase";



@Component({
    moduleId:module.id,
    templateUrl: "./stats.component.html",
    styleUrls: ['stats.component.css']
})


export class StatsComponent implements OnInit, DoCheck {

    private mydata;
    private val;


    constructor(private dataService:DataService,
     private zone: NgZone

    ){

    }

    ngOnInit(){

        this.dataService.firebaseInit();

        Here i will call the value/childListener from my firebase.service.ts;
        this.dataService.monitor((result)=>{
            console.log("Event type: " + result.type);
             console.log("Key: " + result.key);
             console.log("Value: " + JSON.stringify(result.value));
             this.zone.run(()=>{
                 this.mydata=JSON.stringify(result.value);                     
             });

        });

    }

    ngDoCheck() {
        console.log("Change detection encountered!")
    }




}

firebase.service.ts

import { Injectable, NgZone } from "@angular/core";
import { Observable as RxObservable } from "rxjs/Observable";
import { HttpClient, HttpHeaders, HttpResponse } from "@angular/common/http";
import "rxjs/add/operator/map";
import "rxjs/add/operator/do";
import * as firebase from "nativescript-plugin-firebase";


@Injectable()
export class DataService {

    constructor(

    ) { }

    firebaseInit() {

        return firebase.init({
        }).then(
            () => {
                // console.log("initialized");

            }
            ).catch(
            (err) => { console.log("Error is: " + err) }
            )

    }



  monitor(onValueEvent){
            let str = '5C:CF:7F:B3:07:0E/17-04-2018/11-35/';
            return firebase.addValueEventListener(onValueEvent, '/CarData/'+ str).then(
                function (listenerWrapper) {
                    var path = listenerWrapper.path;
                    var listeners = listenerWrapper.listeners; // an Array of listeners added
                    // you can store the wrapper somewhere to later call 'removeEventListeners'
                }
            );

     }