Как я могу общаться от ребенка к дедушке?

Question

Я разрабатываю одно приложение с Angular 2. В моем сценарии есть три компонента:

• SearchComponent: этот компонент вызывает веб-сервис и внедряет результат в SearchResultComponent.
• SearchResultComponent: этот компонент предоставляет мои данные в одной таблице.
• EditComponent: этот компонент позволяет редактировать мои данные.

Ниже код поиска компонента:

<form>
    ... there my form input
</form>

<!-- result is a property inside my SearchComponent class -->
<search-result [(value)]="result"></search-result>

Ниже кода SearchResultComponent:

<div>
    <table>
        ... there is my table
        ... foreach row I have one edit component
        <tr>
            <td>data</td>
            <td>
                <edit></edit>
            </td>
        </tr>
    </table>
</div>

Ниже мой код EditComponent:

<form>
    ... There are edit inputs...
</form>

<button label="Salva" (click)="edit()"></button>

<edit [(documentId)]="id"></edit>

Моя цель заключается в том, чтобы при нажатии на кнопку "Сохранить" я перезагрузил свой результат.

Как я могу достичь цели?

Спасибо

Answer 1

Есть как минимум 2 способа сделать это.
1. Опция: создайте одноэлементный сервис, как предложено @AsifKarimBherani.

..Синглтон-шаблон - это шаблон проектирования программного обеспечения, который ограничивает создание экземпляра класса одним объектом. Это полезно, когда ровно один объект необходим для координации действий в системе.

В простых случаях использования в Angular 2+ вы можете достичь такого результата, предоставляя сервис только в app.module.ts (при использовании стандартной структуры файлов / папок из Angular-CLI).

2. Опция: создать мост от внука к родителю и другой мост от родителя к деду с помощью декоратора @Output.

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

Свойство EventEmitter дочернего элемента является выходным свойством, обычно украшенным украшением @Output.

Надеюсь, что это дало вам некоторые идеи.