Значение, не передаваемое родительскому компоненту

#angular

Вопрос:

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

Вот мой код

Ребенок

 loanAdjustmentSubmitted = new Subject<any>();

if (resp.header.statuscode === "1") {
  this.loanAdjustmentSubmitted.next(resp);
}
 

Родитель

 @Input() loanAdjustmentSubmitted: any;

console.log(this.loanAdjustmentSubmitted);
 

Что я делаю не так?

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

1. Вам нужен @Output() компонент в вашем ребенке. Он не сопоставляет их автоматически на основе имен свойств. Экскурсия по героям в angular.io может быть полезно.

Ответ №1:

  • @Input : Отправка данных от родителя -> >Ребенка
  • @Output EventEmitter : Отправка данных от ребенка -> >Родителя

Попробуйте сделать следующее

Ребенок (*.ts)

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

@Output() loanAdjustmentSubmitted = new EventEmitter();

if (resp.header.statuscode === "1") {
  this.loanAdjustmentSubmitted.emit(resp);
}
 

Родитель (*.html)

 <app-child (loanAdjustmentSubmitted)="onLoanAdjustmentSubmitted($event)"></app-child>
 

Родитель (*.ts)

 onLoanAdjustmentSubmitted(value: any) {
  console.log(value);
  // use `value` from child component
}
 

Для получения дополнительной информации обратитесь к документу Angular «Совместное использование данных между дочерними и родительскими директивами и компонентами».

Если вам интересно, то Angular EventEmitter -это всего лишь угловое расширение RxJS Subject .

Ответ №2:

Существует два способа отправки события родительскому компоненту из дочернего компонента.

  1. Эмиттер событий через ссылку на атрибут @Output
  2. Объявив свой тип субъекта наблюдаемым в службе и введя его как в родительский, так и в дочерний компоненты с помощью конструктора.