Ionic分段只有在点击内容输入后才会更改

Question

我正在使用ionicv2和Adobe Creative SDK构建照片编辑应用程序。 我已经成功实现了Creative 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 (当我点击第二个部分时，除非我点击第一个部分中的输入框，否则它不会跳转到第二个部分)

<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有关。谢谢。

- Redzwan Latif

---

你的 console.log("Success Editing!", newUrl); 执行了吗？ - Duannx

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

- Aman

---

你好，我遇到了同样的问题。不幸的是，你的解决方法对我无效。我是通过谷歌地图事件监听器访问片段页面的。google.maps.event.addListenerOnce(infoWindow, 'domready', () => { document.getElementById(divid).parentNode.parentNode.parentNode.parentNode.addEventListener('click', this.goConstruction(element.id), {passive: true}); }); goConstruction(id) { return (event) => { this.navCtrl.push('ConstructionSegmentPage', {id: id}) } } - markus

Answer 2

我这里也遇到了同样的问题。之前在其他工作中没有遇到过这个问题，但在某些未知的原因下出现了。

    this.segment.ngAfterContentInit();

我不会帮上忙。

而且我发现这个解决方案对我有用。

1. add a event handle ionChange in html

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

2. 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();
   } 
   }
   

- Gormit

Answer 3

在我的情况下，当我在NgZone旁边加入ChangeDetectorRef后，直到我在我引用的ngSwitch上添加ngModel到ion-segment才起作用。

- Zack