单击按钮时隐藏弹出窗口
hide popup on button click
我试图在 angular 应用程序中隐藏按钮单击时的弹出窗口。我在一个组件中打开弹出窗口，因此我将该组件导入弹出内容组件（我有一个关闭按钮）以便访问弹出窗口本身。我注册了一个点击事件，它应该关闭弹出窗口。但是如果我点击关闭按钮，什么也不会发生。
您可以在此处找到 stackblitz：https://stackblitz.com/edit/angular-dxpopup-vffzdr
我不会像你那样做。
您正在将 app 组件的一个实例提供给 sender 组件。在建筑上我会说，这是冒险的。在Angular中的组件方面，一般都是使用构造函数进行注入。我知道那里有解释的余地，但我可以肯定地说，在创建可能数百个组件时，我不记得通过构造函数将数据或其他组件引用（特别是应用程序）传递到组件中。仅限注射。否则，您最终可能会遇到无法清理的引用和其他各种问题。通常，输入和服务是将数据传递到组件的方式。
我会做的是在发件人组件中创建一个输出，"closeClicked"，或类似的东西。当单击按钮被触发时，该输出被触发（因此 EventDispatcher 触发事件，"Hey my close button was clicked!!!"）。
然后，当您使用 senderComponent（您在 app.component.html 中执行）时，您为该输出设置了一个处理程序（所以这将在您的 app.component.ts 中）。现在，当您单击关闭时，发件人组件将告诉 app.component、"my close button was clicked."
在 app.component.ts 中，您现在可以通过模板变量引用 DX 组件并调用隐藏（如果该组件有一个 API 用于隐藏它），或者您可以只设置一个 *ngIf ="hide_sender_visible" 在 dx 元素标记中，并将 hide_sender_visible 切换为 true 或 false，具体取决于您需要它做什么。
从架构上讲，将父项提供给其子项几乎从来都不是（可能永远不会）一个好主意。最好使用服务或输入来提供信息，或者使用服务或输出来提供数据。如果您在网上查找 "component communication angular"，您会发现关于该主题的十亿篇文章基本上都说了同样的话。
无论如何，您可以按原样修复它以使其正常工作。但我可以相当自信地告诉你，如果你在面试时将其作为代码示例提交，你可能不得不回答的第一个问题是，"why didn't you just use an output and hide the element, or call the component api via a template ref?"
我试图在 angular 应用程序中隐藏按钮单击时的弹出窗口。我在一个组件中打开弹出窗口，因此我将该组件导入弹出内容组件（我有一个关闭按钮）以便访问弹出窗口本身。我注册了一个点击事件，它应该关闭弹出窗口。但是如果我点击关闭按钮，什么也不会发生。
您可以在此处找到 stackblitz：https://stackblitz.com/edit/angular-dxpopup-vffzdr
我不会像你那样做。
您正在将 app 组件的一个实例提供给 sender 组件。在建筑上我会说，这是冒险的。在Angular中的组件方面，一般都是使用构造函数进行注入。我知道那里有解释的余地，但我可以肯定地说，在创建可能数百个组件时，我不记得通过构造函数将数据或其他组件引用（特别是应用程序）传递到组件中。仅限注射。否则，您最终可能会遇到无法清理的引用和其他各种问题。通常，输入和服务是将数据传递到组件的方式。
我会做的是在发件人组件中创建一个输出，"closeClicked"，或类似的东西。当单击按钮被触发时，该输出被触发（因此 EventDispatcher 触发事件，"Hey my close button was clicked!!!"）。
然后，当您使用 senderComponent（您在 app.component.html 中执行）时，您为该输出设置了一个处理程序（所以这将在您的 app.component.ts 中）。现在，当您单击关闭时，发件人组件将告诉 app.component、"my close button was clicked."
在 app.component.ts 中，您现在可以通过模板变量引用 DX 组件并调用隐藏（如果该组件有一个 API 用于隐藏它），或者您可以只设置一个 *ngIf ="hide_sender_visible" 在 dx 元素标记中，并将 hide_sender_visible 切换为 true 或 false，具体取决于您需要它做什么。
从架构上讲，将父项提供给其子项几乎从来都不是（可能永远不会）一个好主意。最好使用服务或输入来提供信息，或者使用服务或输出来提供数据。如果您在网上查找 "component communication angular"，您会发现关于该主题的十亿篇文章基本上都说了同样的话。
无论如何，您可以按原样修复它以使其正常工作。但我可以相当自信地告诉你，如果你在面试时将其作为代码示例提交，你可能不得不回答的第一个问题是，"why didn't you just use an output and hide the element, or call the component api via a template ref?"