问题
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.
add a event handle ionChange in html
<ion-segment [(ngModel)]="cat" (ionChange)=onSegmentChanged($event)>
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