两个子组件的更改如何导致父组件的输出更改？

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>

在上面的代码中，我正在做的是，当子复选框组件中发生任何未选中的检查时，您会发出表示类似类型的json的值

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

现在在showFreshDetails（json，details）（在父组件中定义）内部，您将传递此json以及子详细信息组件的模板参考变量。在这里，它被定义为#details on child-details组件。 在showFreshDetails（）内部，您调用子详细信息组件的方法，例如，使用 template reference variable details（详细信息模板）细节，例如showNewDetails（），还可以将发出的json传递给该方法你想要的。