单击按钮时隐藏弹出窗口

Question

我正在尝试在角度应用中单击按钮时隐藏弹出窗口。我在一个组件中打开弹出窗口，因此我将该组件导入到弹出内容组件（在其中有一个关闭按钮）中，以便能够访问弹出窗口本身。我注册了一个click事件，该事件应该关闭弹出窗口。但是，如果我单击关闭按钮，则什么也不会发生。

您可以在此处找到堆叠闪电战：https://stackblitz.com/edit/angular-dxpopup-vffzdr

Answer 1

我不会像您那样做。

您正在将应用程序组件的一个实例提供给发件人组件。在架构上，我会说这很简单。就Angular中的组件而言，构造函数通常用于注入。我知道这里有解释的空间，但是我可以肯定地说，在创建数百个组件时，我不记得通过构造函数将数据或其他组件引用（特别是应用程序）传递到组件中。仅注射。否则，您可能会遇到无法清理的引用以及其他各种问题。通常，输入和服务是将数据传递到组件的方式。

我要做的是在发件人组件“ closeClicked”或类似的组件中创建输出。当单击按钮被触发时，该输出被触发（因此EventDispatcher触发一个事件，“嘿，我的关闭按钮被单击了！！！”）。

然后，当您使用senderComponent（在app.component.html中进行操作）时，您将为该输出设置处理程序（因此将在app.component.ts中）。现在，当您单击关闭时，发件人组件将告诉app.component，“我的关闭按钮已被单击。”

在app.component.ts中，您现在可以通过模板变量引用DX组件并调用hide（如果该组件具有用于隐藏它的API），或者您可以在dx元素标记，然后将hide_sender_visible切换为true或false，具体取决于您需要执行的操作。

从建筑学的角度来看，将父母养育成孩子几乎从来不是一个好主意。最好使用服务或输入来馈送信息，或者使用服务或输出来馈送数据。如果您在网上查找“组件通信角度”，您将找到十亿篇关于该主题的文章，基本上都说相同。

无论如何，您可能会以使其正常工作的方式对其进行修复。但我可以有把握地告诉您，如果您在面试中将其作为代码示例提交，那么您可能需要解决的第一个问题是：“为什么不只使用输出并隐藏元素，或通过模板引用调用组件api？“