组件父级中的单击事件无法以角度工作答案

【问题标题】：click event in parent of component not working in angular组件父级中的单击事件无法以角度工作
【发布时间】：2021-10-31 05:14:39
【问题描述】：

我有类似这种模式的嵌套组件

<div (click)="saveInfo()">
    <product-list-component>
      <single-product>
        <div (click)="navigateToDetailsProduct()"></div>
      <single-product>
    <product-list-component>
</div>

当我单击单个产品时，我希望同时执行单击功能（父组件中的 saveInfo() 和子组件中的 navigateToDetailsProduct()）。但有时它们都被执行，有时只是子组件中的点击功能。我很高兴了解如何在 Angular 中触发父组件和子组件中的两个函数。

【问题讨论】：

标签： javascript angular events onclick parent-child

【解决方案1】：

可以同时触发父子组件angular中的两个函数。当您单击 navigateToDetailsProduct() 时，将触发此功能以及 saveInfo()。请打开下面的链接看看。点击“Navigate To Details Product”，您可以看到两个警报将在第一次触发时出现navigateToDetailsProduct()，第二次在触发saveInfo() 时出现。

https://stackblitz.com/edit/angular-ivy-uvyacb?file=src/app/singleproduct.app.component.html

如果您需要更多信息，请告诉我。

【讨论】：

感谢您的回复，我不想使用输出装饰器；因为没有简单的父子关系。这种关系就像我写的那样；如果我使用输出和事件发射器，我必须为所有嵌套组件编写输出装饰器。
我想我知道为什么会这样了。子组件中的功能导航到详细产品页面，并且无法触发 saveInfo() 功能。我知道纯 js 可以在捕获阶段触发点击事件，但我不知道如何用 angular 编写它。
在 Angular 中，您知道是否要在组件之间进行通信，那么您必须使用输入/输出装饰器。我认为没有其他方法可以做到这一点。请通过此链接您可能会得到一些解决方案。 angular.io/guide/component-interaction
我不想在组件之间共享数据。我想执行两个功能，一个是父母，一个是孩子我在这篇文章中问了我的新问题，如果你有任何想法，我很高兴听到，非常感谢。 stackoverflow.com/questions/69026412/…