Question

我根据条件创建Slides。当条件为真时，Slides组件被初始化。

<ion-slides *ngIf="condition === true">
  <ion-slide *ngFor="let question of questions">
    // slide content
  </ion-slide>
</ion-slides>

Addionally我通过设置onlyExternal = true来禁用滑动。由于这不是输入属性，我必须在父组件的ngAfterViewInit方法中设置值。

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { Slides } from 'ionic-angular';

@Component{
  ...
}
export class QuizPage implements AfterViewInit {
  @ViewChild(Slides) slides: Slides;
  ...
  ngAfterViewInit {
    this.slides.onlyExternal = true;
  }
  ...
}

当视图条件发生变化时，Slides - 组件被破坏并失去onlyExternal设置。当条件满足时，它会再次初始化，但在初始化父组件时，ngAfterViewInit仅被调用一次。这意味着未设置onlyExternal设置。

目前我使用ngAfterViewChecked，但它经常被调用，我想知道是否有更好的方法来解决这个问题。

ngAfterViewChecked() {
  if(this.slides) {
    this.slides.onlyExternal = true;
  }
}

Answer 1

用户ViewChildren并订阅更改通知。

这是一个例子 https://plnkr.co/edit/jZBWR6Y4afqhV9g020k2

  @Component({
    selector: 'my-app',
    template: `
      <div>
        <button (click)="toggleHello()">Toggle Hello</button>
        <h2 #vc *ngIf="show">Hello {{name}}</h2>
      </div>
    `,
  })
  export class App {
    show = true;
    @ViewChildren('vc') h2: QueryList<ElementRef>;

    name:string;
    constructor() {
      this.name = `Angular! v${VERSION.full}`
    }

    toggleHello() {
      this.show = !this.show;
    }

    ngAfterViewInit() {
      this.setAttr();
      this.h2.changes.subscribe(()=> {
        this.setAttr();
      }
    }

    setAttr() {
      if(this.show) {
           this.h2.toArray()[0].nativeElement.style['color']= 'blue';
        }
    }
  }

Answer 2

我终于在另一个问题上找到了解决方案：angular-2-viewchild-in-ngif

必须在@ViewChild上使用setter。当ngIf条件发生变化时，那个只会调用一次。

export class QuizPage {
  private slides: Slides;
  @ViewChild(Slides) set slidesViewChold(slides: Slides) {
    if(slides) {
      slides.onlyExternal = true;
    }
    this.slides = slides;
  }
  ...
}

Angular，Ionic2每次初始化时配置@ViewChild

2 个答案: