我正在尝试在 Angular 应用程序中隐藏按钮单击时的弹出窗口。我在一个组件中打开弹出窗口，因此我将此组件导入到弹出内容组件（我有一个关闭按钮）中，以便访问弹出窗口本身。我注册了一个点击事件，它应该关闭弹出窗口。但是如果我点击关闭按钮，什么都不会发生。
你可以在这里找到堆栈闪电战： https ://stackblitz.com/edit/angular-dxpopup-vffzdr
问问题
486 次
1 回答
0
我不会像你那样做。
您正在将应用程序组件的实例提供给发送方组件。在架构上我会说，这很冒险。在Angular中的组件方面，构造函数一般用于注入。我知道那里有解释的余地，但我可以肯定地说，在创建可能数百个组件时，我不记得通过构造函数将数据或其他组件引用（特别是应用程序）传递到组件中。仅注射。否则，您最终可能会遇到无法清理的引用以及各种其他问题。通常，输入和服务是将数据传递到组件的方式。
我要做的是在发送者组件中创建一个输出，“closeClicked”或类似的。当点击按钮被触发时，该输出被触发（因此 EventDispatcher 触发一个事件，“嘿，我的关闭按钮被点击了！！！”）。
然后，当您使用 senderComponent（您在 app.component.html 中执行此操作）时，您为该输出设置了一个处理程序（因此这将在您的 app.component.ts 中）。现在，当您点击关闭时，发送方组件将告诉 app.component，“我的关闭按钮被点击了”。
在 app.component.ts 中，您现在可以通过模板变量引用 DX 组件并调用 hide（如果该组件有用于隐藏它的 API），或者您可以在 dx 元素标记中设置 *ngIf="hide_sender_visible" ，并将 hide_sender_visible 切换为 true 或 false，具体取决于您需要它执行的操作。
从架构上讲，将父母喂给孩子几乎从来都不是（可能从来没有）一个好主意。最好使用服务或输入来输入信息，或者使用服务或输出来输出数据。如果你在网上查找“组件通信角度”，你会发现关于这个主题的十亿篇文章基本上都是一样的。
无论如何，您可能可以按照使其正常工作的方式对其进行修复。但我可以相当有信心地告诉你，如果你在面试中将其作为代码示例提交，你可能不得不绕开的第一个问题是，“你为什么不直接使用输出并隐藏元素，还是通过模板引用调用组件 api？”
于 2020-06-15T18:57:51.057 回答