将叠加层连接到动态元素

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>

完整的示例可以在 Forked Stackblitz Example

上找到

将叠加层连接到动态元素

Connecting overlay to dynamic elements

angular

angular-cdk