Angular 生命周期的 setTimeout 的替代方案

Question

我的问题来自一种情况（我已经解决了它，但我正在寻找好的做法）。我有一个自动从 API 获取数组的输入。然后使用此数组运行*ngFor 以显示选项并关注第一个选项，但这是我的问题：我必须使用 setTimeout 以便 angular 获取呈现的选项，否则我会得到未定义的选项。我一直在使用它，但我知道使用 setTimeout 不好，因为要重新观察所有状态，我的问题是最好的方法是什么？是用 rxjs 吗？

父组件

@Component({
  template:`
    <generic-child-component></child-component>
  `
})
export class ParentComponent implements OnInit{
  @ViewChild(ChildGenericComponent)child: ChildGenericComponent
  delaySubject: Subject<string> = new Subject();

  contructor (private apiService: ApiService){}

  ngOnInit(){
    this.delaySubject.pipe(
      debounceTime(2500),
    ).subscribe(query=>{
      this.apiService.get(query).subscribe(fetchedData=>{
        this.child.fetchedOptions = fetchedData
        //Here I want to put a focus in the first Object
        //but i need to make a setTimeout to get the rendered option in the child component
        setTimeout(() => {
          this.child.optionsInputs.first.nativeElement.focus() //If this its outside this setTimeout the child.optionsInputs = undefined
        })
      })
    })
  }

  ngAfterViewInit(): void {
    this.child.form.controls['filter'].subscribe(query=>this.delaySubject.next(query))
  }

}

子组件

import { Component, ElementRef, QueryList, ViewChildren } from "@angular/core";
import { FormBuilder, FormGroup} from "@angular/forms";

@Component({
  selector:'generic-child-component',
  template:`
    <form [formGroup]="form">
    <input [formControlName]="'filter'" type="text">
    </form>
    <div *ngFor="let option of fetchedOptions">
      <input #optionsInputs >
      {{option}}
    </div>
  `
})
export class GenericDelayComponent {

  @ViewChildren('optionsInputs')optionsInputs:QueryList<ElementRef>

  constructor(private fBuilder:FormBuilder){}

  fetchedOptions=[]

  form: FormGroup = this.fBuilder.group({
    filter:[null]
  })

}

Answer 1

我的解决方案遵循@JeffryHouser 的回答： 父组件

@Component({
  template:`
    <generic-child-component></child-component>
  `
})
export class ParentComponent implements OnInit{
  @ViewChild(ChildGenericComponent)child: ChildGenericComponent
  delaySubject: Subject<string> = new Subject();

  contructor (private apiService: ApiService){}

  ngOnInit(){
    this.delaySubject.pipe(
      debounceTime(2500),
    ).subscribe(query=>{
      this.apiService.get(query).subscribe(fetchedData=>{
        this.child.setOptions(fetchedData)
        })
      })
    })
  }

  ngAfterViewInit(): void {
    this.child.form.controls['filter'].subscribe(query=>this.delaySubject.next(query))
  }

}

子组件

import { Component, ElementRef, QueryList, ViewChildren } from "@angular/core";
import { FormBuilder, FormGroup} from "@angular/forms";

@Component({
  selector:'generic-child-component',
  template:`
    <form [formGroup]="form">
    <input [formControlName]="'filter'" type="text">
    </form>
    <div *ngFor="let option of fetchedOptions">
      <input #optionsInputs >
      {{option}}
    </div>
  `
})
export class GenericDelayComponent {

  @ViewChildren('optionsInputs')optionsInputs:QueryList<ElementRef>

  constructor(private fBuilder:FormBuilder){}
  
  ngAfterViewInit(){
    if(this.fetchedOptions.length){
      this.child.optionsInputs.first.nativeElement.focus()
    }  
  }  

  fetchedOptions=[]

  setOptions(options:[]{
    this.fetchedOptions = options
  }

  form: FormGroup = this.fBuilder.group({
    filter:[null]
  })

}

Answer 2

我必须使用 setTimeout 以便 angular 获取渲染选项 否则我会得到它的未定义

没有代码，很难回答这个问题，我不清楚如何使用 setTimeout() 来防止 Angular 呈现未定义的变量。但是，有一些想法：

选项 1：默认结果。

一个例子可能是这样的：

export class AppComponent  implements OnInit {
  myResults = [];

  ngOnInit(): void {
     myService.loadData.subscribe((resultsFromServer) => {
          this.myResults = resultsFromServer;
     });
  }
}

这是我最常用的。

选项 2：在组件初始化之前使用Resolvers 加载数据。解析器基本上是在路由加载之前和组件初始化之前运行的一些代码。文档中有示例，这里不再赘述。

选项 3：如果您真的需要 setTimeout() 功能，您可以使用 rxjs delay 作为可观察链的一部分：

一般来说，可能是这样的：

of(([])).pipe(
 delay(6000)
).subscribe((results) => { 
// do something
 });