离子片段只在点击内容输入后发生变化

Question

使用ionicv2和Adobe Creative SDK构建照片编辑应用程序。我已成功实施了广告素材SDK。

CSDK成功返回编辑文件的URL后，我推送一个包含段的页面以及文件URL。

问题出在第二页上，当我点击该段时，它不会切换。只有当我点击页面内的输入时，它才会切换。

我试过没有CSDK，它运行没有任何问题。

我的代码：

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

} 

第二页（含部分组件）

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

第二页HTML（当我点击段2，它不是去那里，除非我点击输入段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，控制台日志不会返回任何错误。你有什么想法发生了什么事？我真的认为它与CSDK有关。谢谢

Answer 1

我遇到了与段相同的问题。我解决它的方式是：

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