Как вызвать родительский метод Angular 2 с возвращаемым значением? - PullRequest
0 голосов
/ 06 июня 2018

У меня есть два метода в родительском компоненте:

public isOpen(index: number): boolean {
    const block = this.dropDownBlocks.find(b => b.index === index);
    return block.open;
  }

  public openDropDown(index: number) {
    const block = this.dropDownBlocks.find(b => b.index === index);
    const i = this.dropDownBlocks.indexOf(block);
    this.dropDownBlocks[i].open = !block.open;
  }

Независимо от того, что делать.

В дочернем компоненте я определил:

@Output() openTab = new EventEmitter<number>();
@Output() opened = new EventEmitter<number>();

И ниже вДочерний компонент, который я написал:

public openDropDown(index: number) {
   this.openTab.emit(index);
}

public isOpen(index: number) {
   return this.opened.emit(index);
}

Дочерний шаблон:

<div class="header" (click)="openDropDown(2)"></div>
<div class="body" [hidden]="!isOpen(2)">

Это означает, что я вызываю дочерний метод и передаю инициативу родительскому методу с тем же именем:

public openDropDown(index: number) {
       this.openTab.emit(index);
    }

Итак, дочерний компонент включается в родительский элемент следующим образом:

<app-missed-plan (openTab)="openDropDown($event)" (opened)="isOpen($event)"></app-missed-plan>

Проблема в isOpen() не работает и не возвращает значение

Ответы [ 2 ]

0 голосов
/ 04 марта 2019

Я использовал функцию обратного вызова в моей реализации.Дочерний компонент передает значение и обратный вызов родителю, родительский элемент работает со значением и возвращает результат этой работы в дочерний компонент, используя обратный вызов.

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

@Output() opened = new EventEmitter<{ value: number, onResult: Function }>()

public isOpen(index) {
    this.opened.emit({
        value: index,
        onResult: (result) => doSomethingWithResult
    })
}

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

<app-parent 
     (opened)="doSomething($event.value, $event.onResult)">
</app-parent>

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

public doSomething(index, onResult) {
    returnValue = doStuffWithIndex
    onResult(returnValue)
}
0 голосов
/ 06 июня 2018

Вам не нужно возвращаться сюда.Просто выведите значение из дочернего компонента.Это должно вызвать родителя isOpen($event)

public isOpen(index: number) {
   this.opened.emit(index);
}

РЕДАКТИРОВАТЬ: из комментариев ниже, ясно, что вы пытаетесь вернуть данные от родителя к ребенку.Лучше использовать @Input() вместо возврата данных из метода родительского компонента.

А также вам не нужны два излучателя в вашем случае.Достаточно одной Output и одной Input переменных

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...