如何将数据从 child 传递到 parent？

Question

我需要将 child 组件中的一个变量传递给 parent 页面。我试图传递的这个变量是 Barcode Scanner 的数组结果。

我需要将它传递给 parent 以发送给 API。

childComponent.ts

this.consultList;

parentComponent.ts

export class ParentComponent implements OnInit {

@Input() consultList: any[] = [];

testCall() {
console.log('Test Consult: ', this.consultList; 
}

Answer 1

你在想什么叫做抽象class。 abstract class 可以像接口一样定义抽象属性，像接口一样定义抽象方法，与接口不同的是它可以实际实现方法。您不能初始化抽象 class，但可以继承代码以从中重用。

https://codesandbox.io/s/patient-breeze-h4s3t?file=/src/index.ts

abstract class Parent {
  abstract someProperty: string;

  someCall() {
    console.log(this.someProperty);
  }
}

class ChildOne extends Parent {
  someProperty = "I am child one";
}

class ChildTwo extends Parent {
  someProperty = "I am child two";
}

const one = new ChildOne();
const two = new ChildTwo();

one.someCall(); // "I am child one";
two.someCall(); // "I am child two";

Answer 2

这是一个示例stackblitz项目，用于测试父子数据传输，使用@Input()和@Output()机制

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

@Component({
  selector: 'child',
  template: `
    <h1>Hello {{ name }}! This is child component</h1>
    <button (click)="sendEventToParent()">Send data to parent</button>
  `,
  styles: [
    `
      h1 {
        font-family: Lato;
      }
    `
  ]
})
export class ChildComponent {
  @Input() name: string;
  @Output() eventFromChild: EventEmitter<string> = new EventEmitter();

  sendEventToParent(): void {
    this.eventFromChild.emit('data from child');
  }
}

这里是父组件html 称为子组件

<child name="{{ name }}" (eventFromChild)="onEvent($event)"></child>

<h1>This is parent component</h1>
<p>{{dataFromChild}}</p>

和这样的事件绑定

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular ' + VERSION.major;
  dataFromChild = '';

  onEvent(event): void {
    this.dataFromChild = event;
  }
}

如何将数据从 child 传递到 parent？

How to pass data from child to parent?

javascript

angularjs

typescript

ionic-framework