Question

我是打字稿和Angular 2的新手，我在尝试输出到Cordova / Angular应用程序中的页面时遇到了一些麻烦。

Page（book.html）：

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Book</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h3>Book</h3>

  <p>
    Book page.
  </p>
  <p>
    <span>{{ oBookingDebug }}</span>

  </p>

</ion-content>

代码（book.ts）：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { InAppBrowser } from '@ionic-native/in-app-browser';

@Component({
  selector: 'page-book',
  templateUrl: 'book.html'
})
export class BookPage {
    public oBookingDebug: string = "";

    constructor(public navCtrl: NavController, public iab: InAppBrowser) {

        this.oBookingDebug="TEST"; // <-- WORKS AND SHOWS ON THE PAGE!!

        const browser = this.iab.create('http://**');
        browser.on("loadstop")
        .subscribe(
        () => {
            browser.executeScript(
            {
                code:'localStorage.getItem("bookingObject");'
            }).then(
                (oBooking)=>{
                    alert(oBooking); // Test
                    this.oBookingDebug="DAVE"; // <-- DOESNT WORK!!
                });
        },
        err => {
            console.log("InAppBrowser Loadstop Event Error: " + err);
        });

    }
}

如果你查看我的评论，你可以看到哪些有效，哪些无效，如何从executecript回调中访问页面输出，id就像能够在此时显示到页面而且还分配到变量以供以后访问。

Answer 1

似乎角度变化检测让你的生活变得艰难，试试这个：

import { ChangeDetectorRef } from '@angular/core'

constructor(private cdr: ChangeDetectorRef) {}

并在你的回调中：

(oBooking) => {
  this.oBookingDebug = 'DAVE';
  this.cdr.detectChanges();
});

这告诉Angular它应该检查是否有更改，以及是否在DOM树中呈现了某些内容。 Here您可以找到文档。

Angular 2 + Typescript显示函数内的变量

1 个答案: