角度 2 显示单击行的浮动 div答案

【问题标题】：angular 2 show floating div where row clicked角度 2 显示单击行的浮动 div
【发布时间】：2018-11-18 19:48:24
【问题描述】：

我不是在寻找链接Expandable table rows in angular 4 with angular material中解释的可扩展行

我只需要在我点击鼠标的地方显示一个小的浮动 div。（选择一行）。我准备了一个示例，用于突出显示选定的行和现在显示在表格下方的浮动 div。选择row show div，选择gain hide div。请帮助显示鼠标单击/选择行的位置。代码在链接 https://stackblitz.com/edit/div-on-click

【问题讨论】：

您想要类似于带有mat-select、mat-menu 等控件的小框？
@IvanS95，我之所以说 div 是因为我可以在那个浮动 div 中包含我想要的任何东西，比如 mat-card。我实际上需要在那个 div 中显示一个 3 列的小表格。谢谢
我明白，只是问你是否正在考虑类似于 mat-select 和 mat-menu 的模态框的东西，我认为它可以用这个来完成，但我还没有真的试过了：material.angular.io/cdk/overlay/overview
@IvanS95，感谢叠加提示。我发现了一篇很棒的文章，通过它我可以使用覆盖以另一种方式轻松地完成我需要的事情。链接是blog.thoughtram.io/angular/2017/11/20/…

标签： angular typescript angular-material

【解决方案1】：

我知道在这个问题上您提到您不想要可扩展行...我将继续并在此处发布堆栈闪电战示例以供您使用可扩展行进行审核，这使用可扩展行这不是您想要的，但它是为响应您之前的问题而创建的，该问题在我发布之前已关闭为重复项...我只是想在此处发布以供您查看，以演示可扩展行在您的 stackblitz 示例中如何工作...经过审核，如果这不符合您的要求请告诉我，我会删除。

https://stackblitz.com/edit/div-on-click-qqcdmx?embed=1&file=app/table-basic-example.html

另外，这里是 mat-table 中右键单击上下文菜单的 stackblitz 示例，供您查看。

https://stackblitz.com/edit/angular-material-context-menu-table?file=app/context-menu-example.html

【讨论】：

你的做法看起来会满足我的需求。惊人的！。欣赏它。谢谢