两个子组件的变化如何导致父组件的输出发生变化？

Question

在这里，我有大学任务要做......我被困在中间了。！我有两个子组件，一个具有用于过滤结果的复选框，而一个具有要显示的输出的详细信息。现在我完成了外部部分，即布局，但现在对如何暗示其功能和所有内容感到困惑，伙计们请帮我解决这个问题，因为我从过去 1 天半开始就这样做了。

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 以及 child-details 组件的 模板引用变量。在这里，它被定义为 child-details 组件上的#details。 在 showFreshDetails() 中，您调用 child-details 组件的方法，例如，使用 模板引用变量 details 来调用 showNewDetails()，您也可以将发出的 json 传递给该方法，如果你愿意。