我正在尝试为表格单元格创建自定义弹出窗口，以便在单击它时以类似于mdBoostrap popovers的方式显示单元格详细信息。
目前，我有以下应用：https://stackblitz.com/edit/angular-m5rx6j
Popup组件显示在主组件下，但我想将其显示在表中，即我单击的元素下方。
我想我需要做以下事情：
- 在单击的位置获取“ td”的ElementRef->我不知道
- 将叠加层附加到该元素上->已经这样做了，但是使用了根元素
liwentao19931129 回答：Angular CDK：将覆盖层附加到单击的元素
Netanet Basal博客中有两篇关于CDK使用OverLay的惊人文章
我尝试简化为this stackblitz
基本上，您可以插入叠加层服务
constructor(private overlay: Overlay) { }
要打开模板，请传递原点（我称他为“原点”），模板（我称菜单）和组件的viewContainerRef
this.overlayRef = this.overlay.create(
this.getOverlayConfig({ origin: origin})
);
//I can pass "data" as implicit and "close" to close the menu
this.overlayRef.attach(new TemplatePortal(menu,viewContainerRef,{
$implicit: data,close:this.close
}));
getOverLayConfig返回一个类似的配置
private getOverlayConfig({ origin}): OverlayConfig {
return new OverlayConfig({
hasBackdrop: false,backdropClass: "popover-backdrop",positionStrategy: this.getOverlayPosition(origin),scrollStrategy: this.overlay.scrollStrategies.close()
});
}
位置策略是您要附加模板的位置-具有您喜欢的位置的数组，例如
[
{
originX: "center",originY: "bottom",overlayX: "center",overlayY: "top"
},]
好吧，代码的另一部分是关于关闭模板元素的。我选择在服务中创建一个打开该功能的功能
1.-附加元素
2.-创建
的订阅this.sub = fromEvent<MouseEvent>(document,"click")
3.-返回一个可观察值，它返回null或您在函数“ close”（*）中传递的参数
注意：不要忘记包含在CSS ~@angular/cdk/overlay-prebuilt.css
（*）这使我的模板像
<ng-template #tpl let-close="close" let-data>
<div class="popover" >
<h5>{{name}} {{data.data}}</h5> //<--name is a variable of component
//data.data a variable you can pass
And here's some amazing content. It's very engaging. Right?
<div>
<a (click)="close('uno')">Close</a> //<--this close and return 'uno'
</div>
</div>
</ng-template>
要获取元素的引用，可以使用模板标识符：#this_element。
您可以直接使用组件模板中的值，也可以从@ViewChild / @ViewChildren获取Typescript变量。
例如，在您的代码中：
<td #this_element>
<div (click)="open(this_element)">Overlay Host1</div>
</td>
您的open函数现在将读取open(element: any)，其中element的类型取决于放置#this_element的位置。
您还可以通过以下方式在组件代码中保留此元素
@ViewChild('this_element',{ static: true }) element;
但是，如果您需要访问nativeElement，则gcd中会有一些警告，因此请注意，如果您在网络工作者中运行。在这种情况下，您可能想使用Renderer2。