javascript - 如何通知另一个组件该方法执行

Question

我有四个组件，父组件 componets.html 看起来像

<div class="main">
    <div class="column-left">
        <app-document-info></app-document-info>
    </div>
    <div class="column-center" style="float:left">
        <app-document-scan></app-document-scan>
    </div>
</div>

Document-Scan 组件也包含内部组件，这是该组件的一些片段代码(Document-Nested)

<div class="btnGrp">
  <input type="file" name="img" multiple (change)="onChange($event)">
</div>

  public onChange(event: Event) {
    this.loadFiles();
  };

  loadFiles() {
    let files = event.target['files'];
    this.allFiles = files.length;

    for (var i = 0; i < files.length; i++) {
      let fileReader = new FileReader();
      fileReader.onload = () => {
        let infoFile: string = fileReader.result;
        let obj: fileStructure = {
          name: files[this.loadedFiles].name,
          data: fileReader.result,
          type: files[this.loadedFiles].type
        }
        this.listImages.push(obj);
        this.loadedFiles++;
        this.loadImage();
      }
      if (fileReader && files && files.length) {
        fileReader.readAsDataURL(files[i]);
      }
    }
  }

 loadImage() {
      this.imageService.setImages(this.listImages);
      this.imageLoadedEvent.emit(this.isClickedFileUploader);
}

我的组件 Document-info 我有一些我会在什么时候执行的方法 来自文档扫描的方法 loadFiles() 已完成或将数据传递到我使用服务在 loadImage() 方法中注入(inject)的组件

这是我的服务

    export class ImageService {
    isClicked: boolean = false;    
    listImages: fileStructure[] = [];
    bodyContent;

    setBodyRes(res) {
        this.bodyContent = res;
    }

    getBodyRes() {
        return this.bodyContent;
    }

    setImages(imageList: fileStructure[]) {
        this.listImages = imageList;
    } 

    getImages(): fileStructure[] {
        return this.listImages;
    }
}

如何在 Document-Scan 内部的组件 Document-Nested 之间传递数据或通知某些方法完成执行 和文档信息。 Document-Scan 和 Document-Info 是兄弟？

Answer 1

您可以使用多种不同的方法在组件之间进行通信，您可以在此处找到更多信息:https://angular.io/guide/component-interaction

在您的情况下，您可能希望文档扫描公开一个事件:

@Output() onLoadFilesCompleted = new EventEmitter<DataType>();

然后 parent 需要像这样订阅它

<app-document-scan [onLoadFilesCompleted]="doSomething()"></app-document-scan>

您还可以有一个允许在多个不同组件之间进行通信的注入(inject)服务，如果事情变得复杂，这对您来说可能会更容易。