Ionic 运行函数 AFTER html 已加载且 AFTER api 调用

Question

我有一个名为 getPuzzle() 的函数，它调用 API 来获取数据。我想使用该数据来修改 div。问题是这一切都是在构造函数中完成的，所以还没有加载html。

所以我把修改 html 的代码放到了 ionViewDidEnter 中，然后它在调用 API 之前运行，并且丢失了 this.puzzle 的数据

在 HTML 完全加载和 API 调用之后，我如何才能不运行此代码？

ngOnInit() {
    this.getPuzzle();
  }

getPuzzle() {
      //Get puzzle info
      this.puzzlesService.getPuzzle().subscribe((data) => {
        this.puzzleType = this.puzzlesService.puzzleType;
        this.puzzle = this.puzzlesService.puzzle;
      });
  }

ionViewDidEnter() {
    //Set first tab
    if (this.puzzleType == 'text') {
      new Vara("#text", "assets/fonts/vara/Satisfy/SatisfySL.json", [{
        text: this.puzzle,
        delay: 2000,
        x: 2
      }], {
        fontSize: 25,
        strokeWidth: 1.5,
        duration: 15000,
        color: "black"
      });
    }

  }

Answer 1

您正面临生命周期问题。因此，您可以做的一个好方法是在 Api 的结果之后调用一个函数。在您看来，您可以使用询问来避免插值时未准备好数据{{ puzzle?.text }}

ngOnInit(){
  this.getPuzzle();
}

getPuzzle() {
  //Get puzzle info
  this.puzzlesService.getPuzzle().subscribe((data) => {
    this.puzzleType = this.puzzlesService.puzzleType;
    this.puzzle = this.puzzlesService.puzzle;
    this.updateView(); ??
  });
}

updateView() {      
  //Set first tab
  if (this.puzzleType == 'text') {
  new Vara("#text", "assets/fonts/vara/Satisfy/SatisfySL.json", [{
    text: this.puzzle,
    delay: 2000,
    x: 2 }],{
    fontSize: 25,
    strokeWidth: 1.5,
    duration: 15000,
    color: "black"
  });
 }
}

Answer 2

快速解决方案

这对于尝试使用RxJS 命令式而不是装饰性地使用非常深入（这是 RxJS 的主要代码气味）。即便如此，这是确保getPuzzle 内部的this.puzzlesService.getPuzzle() 在//Set first tab 运行之后的代码之前发出的一种方法。

letsGooooooo = new ReplaySubject();

ngOnInit() {
  this.getPuzzle();
}

getPuzzle() {
  //Get puzzle info
  this.puzzlesService.getPuzzle().subscribe((data) => {
    this.puzzleType = this.puzzlesService.puzzleType;
    this.puzzle = this.puzzlesService.puzzle;

    this.letsGooooooo.next("GOOOOOOO!");

  });
}

ionViewDidEnter() {

  this.letsGooooooo.pipe(
    take(1)
  ).subscribe(_ => {
    //Set first tab
    if (this.puzzleType == 'text') {
      new Vara(
        '#text',
        'assets/fonts/vara/Satisfy/SatisfySL.json',
        [
          {
            text: this.puzzle,
            delay: 2000,
            x: 2,
          },
        ],
        {
          fontSize: 25,
          strokeWidth: 1.5,
          duration: 15000,
          color: 'black',
        }
      );
    }
  });
  
}

---

更多涉及的解决方案

修复您的服务，以便puzzlesService 将当前拼图和拼图类型兑现为可观察对象而不是属性。那么你就不需要在本地重新实现所有这些功能了。

ngOnInit() {
  // No local version of puzzlesService needed
}

ionViewDidEnter() {

  this.puzzlesService.getPuzzle().subscribe(puzzleData => {
    //Set first tab
    if (puzzleData.puzzleType == 'text') { // puzzleData.puzzleType instead of this.puzzleType
      new Vara(
        '#text',
        'assets/fonts/vara/Satisfy/SatisfySL.json',
        [
          {
            text: puzzleData.puzzle, // puzzleData.puzzle instead of this.puzzle
            delay: 2000,
            x: 2,
          },
        ],
        {
          fontSize: 25,
          strokeWidth: 1.5,
          duration: 15000,
          color: 'black',
        }
      );
    }
  });
  
}