Как изменение в ДВУХ дочерних компонентах может привести к изменению в Выходных данных родительского компонента?

Question

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

https://stackblitz.com/edit/angulaar-aman?file=src%2Fapp%2Fapp.component.html

вот работа, которую я сделал до сих пор .. !!

Answer 1

Когда в дочернем компоненте флажка происходит какое-либо изменение, оцените, какие флажки установлены, и пропустите это через отправитель событий. Используя эти данные, вы можете использовать метод детального компонента, используя переменную шаблона. Попробуй это. Я сделал некоторые изменения в stackblitz . Давайте упростим вашу структуру как: -

<app-parent>
 <child-checkbox (checkedValues)="showFreshDetails($event,details)"></child-box>
 <child-details  #details></child-details>
</app-parent>

В приведенном выше коде я делаю так, чтобы при снятии флажка в компоненте child-checkbox вы выдавали значения, например json, типа

[{'option1':checked},{'option2':unchecked})]

Теперь внутри showFreshDetails (json, details) (определено в родительском компоненте) вы передаете этот json, а также ссылочную переменную шаблона компонента child-details. Здесь это определяется как #details для компонента child-details. Внутри showFreshDetails () вы вызываете метод компонента child-details, например: le showNewDetails (), используя шаблонную ссылочную переменную details, вы также можете передать json, который вы передали этому методу, если вы хочу.