将叠加连接到动态元素

Question

我想使用angular-cdk进行覆盖，使用*ngFor可以将其附加到动态创建的元素上。

这里是一个例子：https://stackblitz.com/edit/angular-z4a989，我想打开每个按钮的覆盖，但是覆盖应该附加到打开的覆盖上。有可能吗？

Answer 1

可以在组件中定义属性：

triggerOrigin: any;

此属性将负责覆盖的cdkConnectedOverlayOrigin输入属性：

<ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]="triggerOrigin" 
                                                              ^^^^^^^^^^^^^

然后创建如下所示的切换方法：

toggle(trigger: any) {
  this.triggerOrigin = trigger;
  this.isOpen = !this.isOpen
}

它以触发器实例作为参数。根据单击的按钮，我们将从模板传递它：

<button class="btn btn-primary" cdkOverlayOrigin #trigger="cdkOverlayOrigin" (click)="toggle(trigger)">Open overlay</button>
...
<div style="margin-top:100px">
  <button *ngFor="let btn of btns" cdkOverlayOrigin #trigger="cdkOverlayOrigin"
   (click)="toggle(trigger)">{{btn}}</button>
</div>

在分叉Stackblitz示例上可以找到完整的示例