0

我想使用angular-cdk将附加到动态创建的元素*ngFor的叠加层，是否可以？

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

4

1 回答 1

3

您可以在组件中定义属性：

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 示例中找到

于 2018-06-13T18:45:36.017 回答