父组件属性在 Angular 10 中的 Input() 子组件中没有变化

Question

我想要一个在加载 documents 时在子组件中触发的事件。当我在父组件（进入粗箭头函数）中将 readyToUpload 设置为 TRUE 时，子组件未检测到 Input() 属性上的更改... 为什么会这样？导致粗箭头函数？

child.component.ts

@Input() public readytoUpload: boolean;

async save() {

this.getFormValidationErrors();

this.submitted.emit();

if (this.errors.length > 0) return;
if (this.frm){
  var check = async (ready: boolean) => {
    if (ready) {
      return;
    }
    setTimeout(check, 2000);
  }
  await check(this.readytoUpload);
}

parent.component.html

<app-child (submitted)="onSubmit();" [readyToUpload]="readyToUpload">

parent.component.ts

inputs_to_docs(input_array: Array<any>) {
this.documents = [];
var document_count = 0;
input_array.forEach(element => {
  let doc = {};
  doc.contentType = element.files[0].type;
  doc.fileName = element.files[0].name;
  doc.fileSize = element.files[0].size;

  let reader = new FileReader();
  
  reader.onload = () => {
    
    doc.fileAsBase64 = reader.result.toString();
    
    let docs_aux: Array<any> = this.documents.slice();
    docs_aux.push(doc);
    this.documents = docs_aux;
    ++document_count;
    if (document_count == input_array.length) {
      this.readyToUpload = true;
    }
  }
  
  reader.readAsDataURL(element.files[0]);
});

}

Answer 1

似乎是一种反模式。你为什么不直接使用生命周期钩子：ngOnChanges(); 在子组件

ngOnChanges(){
    if (this.readyToUpload) { // ...code }
}

https://angular.io/api/core/OnChanges

父组件属性在 Angular 10 中的 Input() 子组件中没有变化

Parent component property doesn´t change in Input() child component in Angular 10

javascript

filereader

typescript

angular

父组件 属性 在 Angular 10 中的 Input() 子组件中没有变化

Parent component property doesn´t change in Input() child component in Angular 10

javascript

filereader

typescript

angular

父组件属性在 Angular 10 中的 Input() 子组件中没有变化