Question

我正在尝试在InAppBrowser退出事件后更改模板。事件内部的变量更改是登录console.log（），但不更改模板。

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import {InAppBrowser} from 'ionic-native';    

@Component({
  selector: 'page-list',
  templateUrl: 'list.html'
})
export class ListPage {
  browser:any;
  exit:boolean = false;
  name:string = "hero";
  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  startPayment(){
    let lastUrl:string;
    this.browser = new InAppBrowser('https://ionic.io', '_blank','location=no,toolbar=no,hardwareback=no,EnableViewPortScale=yes,closebuttoncaption=Done');
    this.browser.on("exit")
            .subscribe(
            e => {
                this.name = "zero";
                console.log(this.name);
            },
            err => {
                console.log("InAppBrowser loadstart Event Error: " + err);
            });

    this.browser.on("loadstop")
            .subscribe(
            e => {
                console.log(e);
                lastUrl = e.url;
            },
            err => {
                console.log("InAppBrowser loadstart Event Error: " + err);
            });
  };

  changeName(){
    this.name = 'abcd';
  }

和模板是

<ion-content>
  <button ion-button color="primary" (click)="startPayment()">Pay Now</button>
  <p>
    {{name}}
  </p>
  <button ion-button color="primary" (click)="changeName()">change</button>
</ion-content>

该事件是InAppBrowser退出事件，在console.log中工作，但不更改模板{{exit}}。

但是点击下方按钮就可以了

Answer 1

作为一般规则，当您使用第三方库或在角度2之外运行的东西时，您必须使用ngZone将该库带入角度上下文，以便角度可以做东西。

将区域注入构造函数。

constructor(public navCtrl: NavController, public navParams: NavParams, public zone: NgZone) {
}

从 @ angular / core

导入 ngZone

然后在回调中使用角度应用的上下文。

startPayment(){
    let lastUrl:string;
    this.browser = new InAppBrowser('https://ionic.io', '_blank','location=no,toolbar=no,hardwareback=no,EnableViewPortScale=yes,closebuttoncaption=Done');
    this.browser.on("exit")
            .subscribe(
            e => {
                this.zone.run(() => {
                   this.name = "zero";
                });                
                console.log(this.name);
            },
            err => {
                console.log("InAppBrowser loadstart Event Error: " + err);
            });

    this.browser.on("loadstop")
            .subscribe(
            e => {
                console.log(e);
                this.zone.run(() => {
                   lastUrl = e.url;
                });                
            },
            err => {
                console.log("InAppBrowser loadstart Event Error: " + err);
            });
  };

祝你好运！

退出事件Ionic2

1 个答案: