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

上找到已完成的示例

将叠加层连接到动态元素

1 个答案: