离子页面推送不能延迟

Question

我创建了 ionic 3 移动应用程序，我添加了 Ionic 手风琴列表我尝试在有人单击展开列表项时尝试做，更改为背景颜色并想要延迟导航到彼此，例如 1 分钟，但任何人都知道如何正确地做到这一点。背景颜色是变化的，但不会延迟页面导航

我用这个来延迟页面

this.navCtrl.push('AboutPage', null, {
      duration: 200,

    });

代码部分行

 <ion-row [navPush]="aboutPage" [style.background]="buttonColor" (click)="someAction()">
            <ion-col>
              <div><p class="rooms-dtl-nme" >Basic</p></div>
            </ion-col>
            <ion-col>
              <div><p class="rooms-dtl-nme">2 floar</p></div>
            </ion-col>
            <ion-col>
              <div><p class="room-dtl-price">$ 340.00 </p></div>
            </ion-col>
          </ion-row>

看my working sample

这是我的代码

.ts

aboutPage = AboutPage; private buttonColor: string = "primary";

someAction() {
    this.buttonColor = "light";
}
 data: Array<{title: string, details: string, icon: string, showDetails: boolean}> = [];

  constructor(public navCtrl: NavController, public navParams: NavParams) {

    for(let i = 0; i < 10; i++ ){
      this.data.push({
        title: 'Title '+i,
        details: '',
        icon: 'ios-arrow-down',
        showDetails: false
      });
    }
  }
  toggleDetails(data) {
    if (data.showDetails) {
      data.showDetails = false;
      data.icon = 'ios-arrow-down';
    } else {
      data.showDetails = true;
      data.icon = 'ios-arrow-up-outline';
    }
  }

html

<ion-list>

    <ion-item padding *ngFor="let d of data"  [ngStyle]="{'background':buttonColor}" (click)="someAction()" tappable>


<ion-grid class="book-item-list">

      <ion-row>
        <ion-col>
          <div><p class="rooms-nme">House <span class="room-num-spec">2</span></p></div>
        </ion-col>
        <ion-col>

        </ion-col>
        <ion-col>
          <div><p class="room-price">$ 250.00 </p></div>
        </ion-col>
      </ion-row>
  <ion-row>
    <ion-col>
      <div><p class="rooms-types">Sample</p></div>
    </ion-col>
    <ion-col>

    </ion-col>
    <ion-col>
      <div><p class="room-rate">Rate </p></div>
    </ion-col>
  </ion-row>
      </ion-grid>


      <ion-icon color="primary" item-right [name]="d.icon" (click)="toggleDetails(d)"></ion-icon>

      <div *ngIf="d.showDetails">
        <ion-grid class="book-item-list-dtl" >

          <ion-row [navPush]="aboutPage" [style.background]="buttonColor" (click)="someAction()">
            <ion-col>
              <div><p class="rooms-dtl-nme" >Basic</p></div>
            </ion-col>
            <ion-col>
              <div><p class="rooms-dtl-nme">2 floar</p></div>
            </ion-col>
            <ion-col>
              <div><p class="room-dtl-price">$ 340.00 </p></div>
            </ion-col>
          </ion-row>

        <ion-row>
            <ion-col>
              <div><p class="rooms-dtl-nme" >Basic</p></div>
            </ion-col>
            <ion-col>
              <div><p class="rooms-dtl-nme">2 floar</p></div>
            </ion-col>
            <ion-col>
              <div><p class="room-dtl-price">$ 340.00 </p></div>
            </ion-col>
          </ion-row>
        </ion-grid>



      </div>
    </ion-item>
  </ion-list>

css

.book-item-list-dtl .row { 
    border-bottom: 1px whitesmoke solid;}

Answer 1

先把'AboutPage'改成AboutPage（去掉单引号）

如果你想通过组件处理它，你应该删除 [navPush]="aboutPage"

this.navCtrl.push(AboutPage, null , {
    duration: 2000,
});

WORKING DEMO

---

持续时间：动画应该花费的长度（以毫秒为单位）。

延迟 : 你可以使用 setTimeout

setTimeout(() => {
    this.navCtrl.push(AboutPage, {
        duration: 200, // The length in milliseconds the animation should take.
    });
},2000);