Ionic segment only change after clicking on content input

安稳与你 提交于 2019-12-08 16:23:21

问题


Im building photo editing app using ionicv2 and Adobe Creative SDK. I've succesfully implemented creative SDK.

After CSDK succesfully returns the url of the edited file, I push a page containing segment along with the file URL.

The problem is on the second page, when I click on the segment, it does not switch. It will only switch if I click on the input inside the page.

I tried doing it without the CSDK and it runs without any problem.

My Code:

loadCamera(sourceType){

    const options: CameraOptions = {
      quality: 100,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      sourceType: sourceType
    }

    this.camera.getPicture(options).then((imageData) => {

      // imageData is either a base64 encoded string or a file URI
      // If it's base64:
      let base64Image = 'data:image/jpeg;base64,' + imageData;

      var thisModule = this;

      function success(newUrl) {
          console.log("Success Editing!", newUrl);
          thisModule.goToCreate(newUrl);
      }

      function error(error) {
          console.log("Error!", error);
      }

      /* Optional `options` object. See API guide for usage. */
      var options = {
           outputType: CSDKImageEditor.OutputType.JPEG, 
           quality: 70
      };

      /* Launch the Image Editor */
      CSDKImageEditor.edit(success, error, base64Image, options);
    }, (err) => {
    // Handle error
    });

  }

  /* Push a new page along with url */
  goToCreate(url){
    this.nav.push(SecondPage, {url: url});
  }

}

Second Page (Contains segment component)

section: string;
url: string;

  constructor(...) {
    this.url = navParams.get('url');
    console.log(this.url); //Working Perfectly

    this.section = "segment1";
  }

  onSegmentChanged(segmentButton: SegmentButton) {
    // console.log('Segment changed to', segmentButton.value);
  }

  onSegmentSelected(segmentButton: SegmentButton) {
    // console.log('Segment selected', segmentButton.value);
  }

Second Page HTML (When I click on segment 2, its not going there unless I click on the input inside segment 1)

<ion-content class="secondpage-content">
  <ion-segment class="secondpage-segment" [(ngModel)]="section" (ionChange)="onSegmentChanged($event)">
    <ion-segment-button value="segment1" (ionSelect)="onSegmentSelected($event)">
      Segment 1
    </ion-segment-button>
    <ion-segment-button value="segment2" (ionSelect)="onSegmentSelected($event)">
      Segment 2
    </ion-segment-button>
    <ion-segment-button value="segment3" (ionSelect)="onSegmentSelected($event)">
      Segment 3
    </ion-segment-button>
  </ion-segment>
  <div [ngSwitch]="section">
    <div *ngSwitchCase="'segment1'" >
      <ion-item>
        <ion-label floating>Input</ion-label>
        <ion-input type="text" formControlName="input_example"></ion-input>
      </ion-item>
    </div>
    <div *ngSwitchCase="'segment2'" >
    </div>
    <div *ngSwitchCase="'segment3'" >
    </div>
  </div>
</ion-content>

Plus, console logs is not returning any errors. Do you have any idea on whats going on? I really think its related with the CSDK. Thank you


回答1:


I encountered same kind of issue with segment. Way I tackled it was:

import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams, Segment, ModalController } from 'ionic-angular';

section: string;
url: string;
@ViewChild(Segment)
private segment: Segment;
constructor(...) {
    this.url = navParams.get('url');
    console.log(this.url); //Working Perfectly

    this.section = "segment1";
    setTimeout(() => {
        if (this.segment) {
            this.segment.ngAfterContentInit();
            this.segment._inputUpdated();
            this.onSegmentChanged(null)
        }
    });
}

onSegmentChanged(segmentButton: SegmentButton) {
    // console.log('Segment changed to', segmentButton.value);
}

onSegmentSelected(segmentButton: SegmentButton) {
    // console.log('Segment selected', segmentButton.value);
}



回答2:


I got the same problem here. I don't have same problem on my other work before, but under some unknown reason it just happen.

    this.segment.ngAfterContentInit();

won't help neither.

And I found this solution work for me.

  1. add a event handle ionChange in html

    <ion-segment [(ngModel)]="cat" (ionChange)=onSegmentChanged($event)>
    
  2. Add module ChangeDetectorRef and event handler in ts

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


来源:https://stackoverflow.com/questions/45322815/ionic-segment-only-change-after-clicking-on-content-input

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!