如何将子组件中Barcode Scanner的扫描结果数组传递给父组件

Angular 中子组件向父组件传值需要通过 @Output 装饰器 + EventEmitter 实现，你当前使用 @Input 是父组件向子组件传值的语法，方向搞反了，修改步骤如下：

1. 修改子组件 childComponent.ts #

import { Component, Output, EventEmitter } from '@angular/core';

export class ChildComponent {
  // 条码扫描返回的结果数组
  consultList: any[] = [];
  // 定义向外触发的传值事件
  @Output() consultListChange = new EventEmitter<any[]>();

  // 该方法为你的条码扫描完成回调方法，替换成你实际的业务方法名即可
  onBarcodeScanFinish() {
    // 拿到扫描结果后，通过emit把数组抛给父组件
    this.consultListChange.emit(this.consultList);
  }
}

2. 修改父组件模板 parent.component.html #

在父组件引用子组件的位置，绑定子组件抛出的consultListChange事件，接收传递过来的值：

<!-- 将app-child替换成你实际的子组件选择器名称 -->
<app-child (consultListChange)="receiveScanList($event)"></app-child>

3. 修改父组件 parentComponent.ts #

删除原来的@Input装饰器，定义接收方法存储子组件传过来的扫描数组：

import { Component, OnInit } from '@angular/core';

export class ParentComponent implements OnInit {
  // 无需加@Input，这是父组件自身存储扫描结果的变量
  consultList: any[] = [];

  ngOnInit() {}

  // 接收子组件传递的扫描结果
  receiveScanList(scanResult: any[]) {
    this.consultList = scanResult;
    // 拿到值后可直接调用API，也可在其他业务方法中调用
    this.testCall();
  }

  testCall() {
    // 修复原代码缺少的右括号
    console.log('Test Consult: ', this.consultList);
    // 此处写调用API的逻辑，将this.consultList作为入参传入即可
  }
}

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