小编cor*_*ory的帖子

滚动时重新定位 CdkConnectedOverlay

我试图用来CdkConnectedOverlay在单击按钮时显示叠加层。它主要工作,但覆盖层没有在滚动时重新定位。我确定我遗漏了一些小东西,但我终生无法弄清楚。

我正在使用Angular 7.2.8Angular CDK 7.3.3

认为这可能与缺少 cdk 样式有关(类似于),但我导入了它们;如果样式丢失,我希望它首先不能正确显示。我的只是不会在滚动上重新定位。

模板:

<button
  (click)="isOpen = !isOpen"
  cdkOverlayOrigin
  #trigger="cdkOverlayOrigin"
>Show</button>

<ng-template
  cdkConnectedOverlay
  [cdkConnectedOverlayOrigin]="trigger"
  [cdkConnectedOverlayOpen]="isOpen"
>
 Popover content
</ng-template>
Run Code Online (Sandbox Code Playgroud)

成分:

@Component ( {
  selector: 'app-popover',
  templateUrl: './popover.component.html',
  styleUrls: [ './popover.component.css' ],
  changeDetection: ChangeDetectionStrategy.OnPush,
} )
export class PopoverComponent {
  isOpen: boolean = false;
}
Run Code Online (Sandbox Code Playgroud)

还有一个显示问题的 Plunkr:https ://stackblitz.com/edit/angular-7-popover

更新

滚动重新定位问题仅在弹出框位于以overflow: auto. 如果页面溢出,那么它工作正常。您可以使用以下模板查看此行为

<div style="height: 300px; overflow-y: auto">
  <!-- Scroll re-positioning does not work when scrolling …
Run Code Online (Sandbox Code Playgroud)

angular-cdk

7
推荐指数
1
解决办法
3356
查看次数

标签 统计

angular-cdk ×1