单击按钮时隐藏弹出窗口答案

【问题标题】：hide popup on button click单击按钮时隐藏弹出窗口
【发布时间】：2020-06-16 03:09:42
【问题描述】：

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

您可以在这里找到堆栈闪电战：https://stackblitz.com/edit/angular-dxpopup-vffzdr

【问题讨论】：

这工作正常！！

标签： angular devextreme-angular

【解决方案1】：

我不会像你那样做。

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

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

然后，当您使用 senderComponent（您在 app.component.html 中执行此操作）时，您为该输出设置了一个处理程序（因此这将在您的 app.component.ts 中）。现在，当你点击 close 时，sender 组件会告诉 app.component，“我的关闭按钮被点击了。”

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

从架构上讲，将父母喂给孩子几乎从来都不是（可能从来没有）好主意。最好使用服务或输入来输入信息，或者使用服务或输出来输出数据。如果您在网上查找“组件通信角度”，您会发现有关该主题的十亿篇文章基本上都说相同。

无论如何，您可以按照使其正常工作的方式对其进行修复。但我可以相当有信心地告诉你，如果你在面试时提交了它作为代码示例，你可能不得不绕开的第一个问题是，“你为什么不直接使用输出并隐藏元素，还是通过模板引用调用组件api？”

【讨论】：

嗨蒂姆！谢谢你非常详细的评论。实际上，我正处于学习阶段，还没有正确的心态在 Angular 中做干净和正确的事情。我将尝试实施此解决方案。
我强烈（强烈）建议慢慢地、一步一步地完成整个英雄之旅教程。它基本上是成为工作 Angular 开发人员的手册。你不想飞它。 Angular 根据定义是一个“高度自以为是”的框架。与其他一些框架不同，在 90% 的情况下，绝对有一个特定的“正确”方式。
我已经成功了：stackblitz.com/edit/angular-dxpopup-s1hbim
更好，出色的工作。我将通过使用“模板变量”而不是使用 ev.popup 来获取对组件的引用来进一步改进它。查一下，模板变量非常非常有用。如果您只需要获取模板中存在的给定组件的实例（即 html 文件），那么它们会变得非常容易。除了将所需的引用名称放在元素标记中，然后使用它，您基本上不需要做任何事情。