web-dev-qa-db-fra.com

Le segment ionique ne change qu'après avoir cliqué sur l'entrée de contenu

Je construis une application de retouche photo en utilisant ionicv2 et Adobe Creative SDK. J'ai implémenté avec succès creative SDK.

Une fois que CSDK a renvoyé avec succès l'URL du fichier modifié, I Poussez une page contenant un segment avec l'URL du fichier. 

Le problème est sur la deuxième page, lorsque je clique sur le segment, il ne change pas. Cela ne changera que si je clique sur l'entrée dans la page.

J'ai essayé de le faire sans le CSDK et il fonctionne sans problème.

Mon 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});
  }

}

Deuxième page (contient le composant de segment)

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);
  }

Deuxième page HTML ( Quand je clique sur le segment 2, il n’y va pas sauf si je clique sur l’entrée dans le 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>

De plus, les journaux de la console ne renvoient aucune erreur. Avez-vous une idée de ce qui se passe? Je pense vraiment que c'est lié à la CSDK. Je vous remercie

angularionic-frameworkionic2aviaryadobecreativesdk
9
Redzwan Latif

J'ai rencontré le même genre de problème avec segment. La façon dont j'ai abordé c'était:

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
Aman

J'ai le même problème ici. Je n'ai pas eu le même problème sur mon autre travail auparavant, mais sous une raison inconnue, cela se produit. 

    this.segment.ngAfterContentInit();

ne va pas aider non plus.

Et j'ai trouvé cette solution travaille pour moi.

  1. ajouter une poignée d'événement ionChange en HTML

    <ion-segment [(ngModel)]="cat" (ionChange)=onSegmentChanged($event)>

  2. Ajout du module ChangeDetectorRef et du gestionnaire d’événements dans ts

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