AngularJS中如何从父控制器获取子控制器的FileItem？

你遇到的核心问题是普通函数回调里的this指向不对，导致无法更新组件的feedFileInfo属性，同时需要把FileItem传递给父组件。下面是具体的解决步骤：

1. 修复this指向问题 #

在onAfterAddingFile的回调中，不要使用普通function，改用箭头函数。箭头函数会继承外层上下文的this（也就是你的子组件实例），这样就能正确访问和更新组件的属性了。

2. 让父组件获取FileItem #

有两种常用方式可以让父组件拿到FileItem：

方式一：使用@Output事件通知父组件 #

这是最符合Angular组件通信规范的方式，通过自定义事件把FileItem传递给父组件。

子组件代码修改：

import { Component, Output, EventEmitter } from '@angular/core';
// 导入对应库的FileItem，以ng2-file-upload为例
import { FileItem } from 'ng2-file-upload';

@Component({
  selector: 'app-file-upload',
  templateUrl: './file-upload.component.html'
})
export class FileUploadComponent {
  @Output() fileAdded = new EventEmitter<FileItem>(); // 定义输出事件
  feedFileInfo: string = '';
  uploader: any; // 你的uploader实例

  $onInit() { 
    this.feedFileInfo = 'abc'; // 此处可正常更新

    this.uploader.filters.push({
      name: 'customFilter',
      fn: (item /*{File|FileLikeObject}*/, options) => { // 这里也建议用箭头函数避免this问题
        return this.uploader.queue.length < 10;
      }
    });

    // 改用箭头函数
    this.uploader.onAfterAddingFile = (fileItem: FileItem) => {
      console.log('fileItem:', fileItem);
      this.feedFileInfo = 'xyz'; // 现在可以正常更新了
      this.fileAdded.emit(fileItem); // 向父组件发送FileItem
      console.info('onAfterAddingFile', fileItem);
    };
  }
}

父组件模板使用：

在父组件的模板中绑定子组件的fileAdded事件：

<app-file-upload 
  (fileAdded)="handleFileAdded($event)"
  [(feedFileInfo)]="parentFeedInfo"
></app-file-upload>

父组件控制器代码：

在父组件中定义处理事件的方法，接收FileItem：

import { Component } from '@angular/core';
import { FileItem } from 'ng2-file-upload';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent {
  parentFeedInfo: string = '';

  handleFileAdded(fileItem: FileItem) {
    // 这里就能拿到子组件传递过来的FileItem了
    console.log('父组件收到的FileItem:', fileItem);
    // 可以在这里对FileItem进行后续处理
  }
}

方式二：通过双向绑定传递FileItem（可选） #

如果你已经在使用双向绑定，可以把FileItem赋值给一个绑定的属性：

• 子组件定义@Input() selectedFileItem: FileItem | undefined;和@Output() selectedFileItemChange = new EventEmitter<FileItem>();
• 在onAfterAddingFile回调中：this.selectedFileItem = fileItem; this.selectedFileItemChange.emit(fileItem);
• 父组件模板使用：<app-file-upload [(selectedFileItem)]="parentSelectedFile"></app-file-upload>

为什么原来的代码不行？ #

普通function作为回调时，this的指向是调用该函数的对象（也就是uploader实例），而不是你的子组件实例。所以this.feedFileInfo实际上是在给uploader对象添加属性，而不是更新子组件的feedFileInfo，自然父组件也无法获取到这个值。箭头函数不会创建自己的this，而是继承外层作用域的this，所以就能正确访问子组件的属性了。

内容的提问来源于stack exchange，提问作者user5337216