Блог

Главная - Вопросы по программированию - Как передать данные от ребенка к родителю?

Как передать данные от ребенка к родителю?

#javascript #angularjs #typescript #ionic-framework

Вопрос:

Мне нужно передать одну переменную, которая находится внутри моего дочернего компонента, на родительскую страницу. Эта переменная, которую я пытаюсь передать, является результатом массива сканера штрих-кодов.

И мне нужно передать его родителю, чтобы отправить в API.

Дочерний компонент.ts

 this.consultList;

Родительский компонент.ts

 export class ParentComponent implements OnInit {

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

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

Комментарии:

1. вы можете использовать @Input() и @Output() событие для передачи переменных, от родителя к потомку вы можете использовать переменную @Input (), определенную в дочернем компоненте, от потомка к родителю вы можете использовать привязку события, определенную @Output в дочернем компоненте.

2. привет, если мой ответ решит вашу проблему, пожалуйста, отметьте как ответ

Ответ №1:

Вот пример проекта 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;
  }
}

Ответ №2:

То, о чем вы думаете, называется абстрактным классом. Абстрактный класс может определять абстрактные свойства так же, как интерфейс, абстрактные методы так же, как интерфейс, и в отличие от интерфейса он может фактически реализовывать методы. Вы не можете инициализировать абстрактный класс, но вы можете наследовать от него код для повторного использования.

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";
Метки: