在我点击facebook popup messenger输入字段之前，段内容没有改变

时间：2018-06-15 03:56:53

标签： cordova ionic-framework ionic2 ionic3

我是离子新手...... 我正在使用（https://ionicframework.com/docs/native/qr-scanner/）开发具有QRcode扫描仪功能的应用。扫描完qrcode后，我的应用会导航到细分页面。 问题是在应用程序导航到细分页面后...当我点击细分时，内容不会切换。如果导航不是来自Qrcode工作正常。

take a look at this gif

The Weird thing

我发现的最奇怪的事情是，当我在该段页面上时，我使用facebook popup messenger并点击回复输入字段，内容将会切换。

这是我的代码

QRCode扫描仪页面：

ionViewWillEnter() {
//this.navCtrl.push(RackPage, {id: 1})  <---the segment page will not have any problem if i use this code
this.showCamera();
// Optionally request the permission early
this.qrScanner.prepare()
  .then((status: QRScannerStatus) => {
    if (status.authorized) {

      this.scanSub = this.qrScanner.scan().subscribe((rackId: string) => {
        this.navCtrl.push(RackPage, { 'id': rackId })
      });

      this.qrScanner.show();

    } else if (status.denied) {
      console.log('Camera permission denied');
    } else {
      console.log('Permission denied for this runtime.');
    }
  })
  .catch((e: any) => console.log('Error is', e));
  }

 ionViewWillLeave() {
   this.qrScanner.hide(); // hide camera preview
   if (this.scanSub != undefined)
     this.scanSub.unsubscribe(); // stop scanning
   this.hideCamera();
 }

showCamera() {
(window.document.querySelector('ion-app') as HTMLElement).classList.add('cameraView');
}

hideCamera() {
  (window.document.querySelector('ion-app') as HTMLElement).classList.remove('cameraView');
 }

细分页面：

constructor(
public navCtrl: NavController,
public navParams: NavParams
) {
this.rackId = navParams.get('id');
console.log(this.rackId); //no problem here
}

segmentChanged(segment: any) {
    console.log(this.type); //no problem here (type variable are switching but content does not)
}

细分页面HTML 

<ion-header>
  <ion-navbar no-border-bottom>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Segment Page
    </ion-title>
  </ion-navbar>

  <ion-toolbar no-border-top>
    <ion-segment [(ngModel)]="type" (ionChange)="segmentChanged($event.value)">
      <ion-segment-button value="Info">
        <ion-icon name="alert"></ion-icon>
      </ion-segment-button>
      <ion-segment-button value="Devices">
         <ion-icon name="apps"></ion-icon>
      </ion-segment-button>
      <ion-segment-button value="Actions">
        <ion-icon name="build"></ion-icon>
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>


<ion-content>
  <div [ngSwitch]="type">
    <ion-list *ngSwitchCase="'Info'">
       <p>info</P>
    </ion-list>

    <ion-list *ngSwitchCase="'Devices'">
       <p>Devices</p>
    </ion-list>

    <ion-list *ngSwitchCase="'Actions'">
        <p>Actions</p>
    </ion-list>
  </div>
</ion-content>

consolelogs（根据要求）

Starting app-scripts server: --address 0.0.0.0 --port 8100 --livereload-port 35729 --dev-logger-port 53703 --consolelogs
--nobrowser --iscordovaserve --platform android --target cordova - Ctrl+C to cancel
[13:02:35]  watch started ...
[13:02:35]  build dev started ...
[13:02:36]  clean started ...
[13:02:36]  clean finished in 4 ms
[13:02:36]  copy started ...
[13:02:36]  deeplinks started ...
[13:02:36]  deeplinks finished in 74 ms
[13:02:36]  transpile started ...
[13:02:40]  transpile finished in 3.89 s
[13:02:40]  preprocess started ...
[13:02:40]  preprocess finished in less than 1 ms
[13:02:40]  webpack started ...
[13:02:40]  copy finished in 4.95 s
[13:02:45]  webpack finished in 4.86 s
[13:02:45]  sass started ...
Without `from` option PostCSS could generate wrong source map and will not find Browserslist config. Set it to CSS file path or to `undefined` to prevent this warning.
[13:02:48]  sass finished in 3.06 s
[13:02:48]  postprocess started ...
[13:02:48]  postprocess finished in less than 1 ms
[13:02:48]  lint started ...
[13:02:48]  build dev finished in 12.44 s
[13:02:48]  watch ready in 12.69 s
[13:02:48]  dev server running: http://localhost:8100/

[OK] Development server running!
     Local: http://localhost:8100
     External: http://192.168.43.120:8100


> cordova run android
[13:02:50]  tslint: D:/eko_mobile/src/provider/PushService.ts, line: 4
            All imports on this line are unused.

       L3:  import { Events } from "ionic-angular";
       L4:  import { Common } from "../common/Common";
       L5:  import swal from 'sweetalert2';

[13:02:50]  lint finished in 2.56 s
ANDROID_HOME=C:\Users\Sam\AppData\Local\Android\sdk
JAVA_HOME=C:\Program Files\Java\jdk1.8.0_171
Subproject Path: CordovaLib
The Task.leftShift(Closure) method has been deprecated and is scheduled to be removed in Gradle 5.0. Please use Task.doLast(Action) instead.

        at build_ednj5i54gplic1hf602n6ynb.run(D:\eko_mobile\platforms\android\build.gradle:145)
The JavaCompile.setDependencyCacheDir() method has been deprecated and is scheduled to be removed in Gradle 4.0.

Incremental java compilation is an incubating feature.

The TaskInputs.source(Object) method has been deprecated and is scheduled to be removed in Gradle 4.0. Please use TaskInputs.file(Object).skipWhenEmpty() instead.

:preBuild
 UP-TO-DATE
:preDebugBuild
UP-TO-DATE
:checkDebugManifest
:preReleaseBuild UP-TO-DATE
:CordovaLib:preBuild UP-TO-DATE
:CordovaLib:preDebugBuild UP-TO-DATE
:CordovaLib:checkDebugManifest
:CordovaLib:prepareDebugDependencies
:CordovaLib:compileDebugAidl

UP-TO-DATE
:CordovaLib:compileDebugNdk

UP-TO-DATE
:CordovaLib:compileLint

UP-TO-DATE
:CordovaLib:copyDebugLint

UP-TO-DATE
:CordovaLib:mergeDebugShaders

UP-TO-DATE
:CordovaLib:compileDebugShaders

UP-TO-DATE
:CordovaLib:generateDebugAssets UP-TO-DATE
:CordovaLib:mergeDebugAssets

UP-TO-DATE
:CordovaLib:mergeDebugProguardFiles
 UP-TO-DATE
:CordovaLib:packageDebugRenderscript

UP-TO-DATE
:CordovaLib:compileDebugRenderscript

UP-TO-DATE
:CordovaLib:generateDebugResValues

UP-TO-DATE
:CordovaLib:generateDebugResources UP-TO-DATE
:CordovaLib:packageDebugResources

UP-TO-DATE
:CordovaLib:processDebugManifest

UP-TO-DATE
:CordovaLib:generateDebugBuildConfig

UP-TO-DATE
:CordovaLib:processDebugResources

UP-TO-DATE
:CordovaLib:generateDebugSources UP-TO-DATE
:CordovaLib:incrementalDebugJavaCompilationSafeguard

UP-TO-DATE
:CordovaLib:compileDebugJavaWithJavac

UP-TO-DATE
:CordovaLib:processDebugJavaRes

UP-TO-DATE
:CordovaLib:transformResourcesWithMergeJavaResForDebug

UP-TO-DATE
:CordovaLib:transformClassesAndResourcesWithSyncLibJarsForDebug

UP-TO-DATE
:CordovaLib:mergeDebugJniLibFolders

UP-TO-DATE
:CordovaLib:transformNative_libsWithMergeJniLibsForDebug

UP-TO-DATE
:CordovaLib:transformNative_libsWithSyncJniLibsForDebug

UP-TO-DATE
:CordovaLib:bundleDebug

UP-TO-DATE
:CordovaLib:preReleaseBuild UP-TO-DATE
:CordovaLib:checkReleaseManifest

:CordovaLib:prepareReleaseDependencies
:CordovaLib:compileReleaseAidl

UP-TO-DATE
:CordovaLib:compileReleaseNdk

UP-TO-DATE
:CordovaLib:copyReleaseLint

UP-TO-DATE
:CordovaLib:mergeReleaseShaders

UP-TO-DATE
:CordovaLib:compileReleaseShaders

UP-TO-DATE
:CordovaLib:generateReleaseAssets UP-TO-DATE
:CordovaLib:mergeReleaseAssets UP-TO-DATE
:CordovaLib:mergeReleaseProguardFiles UP-TO-DATE
:CordovaLib:packageReleaseRenderscript

UP-TO-DATE
:CordovaLib:compileReleaseRenderscript

UP-TO-DATE
:CordovaLib:generateReleaseResValues
 UP-TO-DATE

:CordovaLib:generateReleaseResources UP-TO-DATE
:CordovaLib:packageReleaseResources
 UP-TO-DATE

:CordovaLib:processReleaseManifest

UP-TO-DATE
:CordovaLib:generateReleaseBuildConfig
 UP-TO-DATE

:CordovaLib:processReleaseResources

UP-TO-DATE
:CordovaLib:generateReleaseSources UP-TO-DATE
:CordovaLib:incrementalReleaseJavaCompilationSafeguard

UP-TO-DATE
:CordovaLib:compileReleaseJavaWithJavac

UP-TO-DATE
:CordovaLib:processReleaseJavaRes

UP-TO-DATE
:CordovaLib:transformResourcesWithMergeJavaResForRelease
 UP-TO-DATE

:CordovaLib:transformClassesAndResourcesWithSyncLibJarsForRelease
 UP-TO-DATE

:CordovaLib:mergeReleaseJniLibFolders
 UP-TO-DATE

:CordovaLib:transformNative_libsWithMergeJniLibsForRelease

UP-TO-DATE
:CordovaLib:transformNative_libsWithSyncJniLibsForRelease
 UP-TO-DATE

:CordovaLib:bundleRelease
 UP-TO-DATE

:prepareComAndroidSupportAppcompatV72310Library
 UP-TO-DATE

:preDebugAndroidTestBuild UP-TO-DATE
:prepareComAndroidSupportMultidex101Library
 UP-TO-DATE

:prepareComAndroidSupportSupportCompat2520Library
 UP-TO-DATE

:prepareComAndroidSupportSupportCoreUi2520Library
 UP-TO-DATE

:prepareComAndroidSupportSupportCoreUtils2520Library

UP-TO-DATE
:prepareComAndroidSupportSupportFragment2520Library
 UP-TO-DATE

:prepareComAndroidSupportSupportMediaCompat2520Library
 UP-TO-DATE

:prepareComAndroidSupportSupportV132510Library
 UP-TO-DATE

:prepareComAndroidSupportSupportV42520Library
 UP-TO-DATE

:prepareComGoogleAndroidGmsPlayServicesBasement1101Library
 UP-TO-DATE
:prepareComGoogleAndroidGmsPlayServicesTasks1101Library
 UP-TO-DATE

:prepareComGoogleFirebaseFirebaseAnalytics1101Library
 UP-TO-DATE

:prepareComGoogleFirebaseFirebaseAnalyticsImpl1101Library
 UP-TO-DATE
:prepareComGoogleFirebaseFirebaseCommon1101Library
 UP-TO-DATE
:prepareComGoogleFirebaseFirebaseCore1101Library
 UP-TO-DATE
:prepareComGoogleFirebaseFirebaseIid1101Library

UP-TO-DATE
:prepareComGoogleFirebaseFirebaseMessaging1101Library

UP-TO-DATE
:prepareComJourneyappsZxingAndroidEmbedded330Library
 UP-TO-DATE

:prepareMeLeolinShortcutBadger1117Library

UP-TO-DATE
:prepareOrgApacheCordovaCordovaLib630DebugLibrary

UP-TO-DATE
:prepareDebugDependencies
:compileDebugAidl

UP-TO-DATE
:compileDebugRenderscript

UP-TO-DATE
:generateDebugBuildConfig

UP-TO-DATE
:generateDebugResValues

UP-TO-DATE
:processDebugGoogleServices
Parsing json file: D:\eko_mobile\platforms\android\google-services.json
:generateDebugResources

:mergeDebugResources
 UP-TO-DATE

:processDebugManifest

UP-TO-DATE
:processDebugResources
 UP-TO-DATE

:generateDebugSources UP-TO-DATE
:incrementalDebugJavaCompilationSafeguard

UP-TO-DATE
:compileDebugJavaWithJavac

UP-TO-DATE
:compileDebugNdk

UP-TO-DATE
:compileDebugSources UP-TO-DATE
:mergeDebugShaders
 UP-TO-DATE

:compileDebugShaders

UP-TO-DATE
:generateDebugAssets UP-TO-DATE
:mergeDebugAssets

:transformClassesWithJarMergingForDebug
 UP-TO-DATE

:transformClassesWithMultidexlistForDebug
 UP-TO-DATE

:transformClassesWithDexForDebug
 UP-TO-DATE
:mergeDebugJniLibFolders
 UP-TO-DATE

:transformNative_libsWithMergeJniLibsForDebug
 UP-TO-DATE

:processDebugJavaRes
 UP-TO-DATE

:transformResourcesWithMergeJavaResForDebug
 UP-TO-DATE

:validateSigningDebug
:packageDebug

:assembleDebug
:cdvBuildDebug

BUILD SUCCESSFUL

Total time: 5.569 secs
Built the following apk(s):
        D:/eko_mobile/platforms/android/build/outputs/apk/android-debug.apk

ANDROID_HOME=C:\Users\Sam\AppData\Local\Android\sdk
JAVA_HOME=C:\Program Files\Java\jdk1.8.0_171
No target specified, deploying to device 'P6LDU16B04000651'.
Skipping build...

Built the following apk(s):
        D:/eko_mobile/platforms/android/build/outputs/apk/android-debug.apk
Using apk: D:/eko_mobile/platforms/android/build/outputs/apk/android-debug.apk

Package name: io.ionic.ekoapp
LAUNCH SUCCESS

[13:03:06]  console.log: Angular is running in the development mode. Call enableProdMode() to enable the production
            mode.
[13:03:06]  console.log: OPEN database: _ionicstorage
[13:03:06]  console.log: new transaction is queued, waiting for open operation to finish
[13:03:06]  console.log: OPEN database: _ionicstorage - OK
[13:03:06]  console.log: DB opened: _ionicstorage
[13:03:06]  console.log: Ionic Native: deviceready event fired after 1881 ms
[13:03:07]  console.log: We have permission to send push notifications
[13:03:15]  console.log: 1 // <--rackID
[13:03:16]  console.log: Actions //when click on action segment
[13:03:17]  console.log: Devices //when click on devices segment

请提前帮助，请帮助。

1 个答案:

答案 0 :(得分：0)

最后，我可以通过引用此post的答案来解决此问题。

只需在ts

中添加模块ChangeDetectorRef和事件处理程序 
import { ChangeDetectorRef } from '@angular/core';        
...
export class xxxPage {
...
constructor(
 private cf: ChangeDetectorRef,
...
}
...
onSegmentChanged(obj)
{        
  this.cf.detectChanges();
} 
}

感谢。 ：）

相关问题
最新问题