离子段仅在单击内容输入后更改 [英] Ionic segment only change after clicking on content input

问题描述

我正在使用ionicv2和Adobe Creative SDK构建照片编辑应用程序。我已经成功实现了创意SDK。

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

在CSDK成功返回已编辑文件的网址后，我推送包含网段的网页和文件网址。

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.

我尝试在没有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});
  }

}

第二页（包含段组件）

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

第二页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>

另外，控制台日志不会返回任何错误。你有什么想法吗？我真的认为它与CSDK有关。谢谢

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

推荐答案

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

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

这篇关于离子段仅在单击内容输入后更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！