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

Question

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

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

另外，我通过设置 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

用户

视图子项并订阅更改通知。

这是一个例子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必须使用二传手。当ngIf条件发生变化时，该选项只会调用一次。

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