Zmiana segmentu jonowego następuje po kliknięciu treści wejściowej

Question

Buduję aplikację do edycji zdjęć za pomocą programu ionicv2 i Adobe Creative SDK. Z powodzeniem wdrożyłem pakiet SDK do kreacji.

Po tym, jak CSDK pomyślnie zwróci adres URL edytowanego pliku, przesyłam stronę zawierającą segment wraz z adresem URL pliku.

Problem występuje na drugiej stronie, gdy klikam segment, nie przełącza się. Przełącza się tylko wtedy, gdy kliknę dane wejściowe na stronie.

Próbowałem robić to bez CSDK i działa bez problemu.

mój kod:

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

} 

Druga strona (zawiera składnik segmentu)

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

Druga strona HTML (Kiedy klikam na segmencie 2, to nie będzie tam chyba kliknij wejście w segmencie 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, logi konsoli nie zwracają żadnych błędów. Czy masz pojęcie, co się dzieje? Naprawdę myślę, że jest to związane z CSDK. Dziękujemy

Answer 1

Napotkałem ten sam rodzaj problemu z segmentem. Sposób, w jaki to zrobiłem:

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