Угловой 7: передача параметров в другой компонент ошибки

Question

У меня есть 2 компонента, один родительский и один дочерний, я хотел бы отправить значение переменной родительскому компоненту, я попробовал приведенный ниже код, но безуспешно.Дочерний компонент отправляет информацию правильно, но родитель не получает, похоже, что функция в родительском компоненте не идентифицирует получение данных для запуска.

дочерний компонент

...

private elements:any;
@Output() element = new EventEmitter<any>();


 constructor() {

 }

  ngOnInit() {
    this.sendContent();
  }


 sendContent() {
    this.elements = "hi";

    console.log("sended");
    console.log(this.elements);

    this.element.emit(this.elements);
    //the function is activated and I can see the return in the console
  }

родительский компонент

...

constructor() {

}

ngOnInit() {

}

receiveContent(elements) {
    console.log("received");
    console.log(elements);
    //the function is not activated when the child component is sent the data
 }

Родительский шаблон

<app-child (sendContent)="receiveContent($event)"></app-child>

Спасибо.

Answer 1

В вашем родительском компоненте вам необходимо привязать правильное событие от вашего дочернего компонента.

В вашем дочернем компоненте вы объявили Output() с именем element, поэтому в этом случае правильное имя event будет использоватьсяв родительском компоненте будет element

Правильный код будет:

<app-child (element)="receiveContent($event)"></app-child>

Официальная угловая документация - взаимодействие с компонентом

Answer 2

В скобках вы должны указать название свойства, которое оформлено с помощью декоратора @Output.В этом случае (элемент)

Измените parent.html на это:

<app-child (element)="receiveContent($event)"></app-child>