在我单击 facebook 弹出信使输入字段之前，细分内容不会更改

Question

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

take a look at this gif

The Weird thing

我发现的最奇怪的事情是当我在该段页面上时，我使用 facebook 弹出消息并单击回复输入字段，内容将切换。

这是我的代码

二维码扫描页面：

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>

控制台日志（根据要求）

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

请帮忙，提前致谢..

Answer 1

最后我可以参考这个 post 的答案来解决这个问题。

只需在 ts 中添加模块 ChangeDetectorRef 和事件处理程序

import { ChangeDetectorRef } from '@angular/core';        
...
export class xxxPage {
...
constructor(
 private cf: ChangeDetectorRef,
...
}
...
onSegmentChanged(obj)
{        
  this.cf.detectChanges();
} 
}

谢谢。 :)

在我单击 facebook 弹出信使输入字段之前，细分内容不会更改

Segment content not changed until I click on facebook popup messenger input field

cordova

ionic-framework

ionic2

ionic3