Angular CDK Overlay 配置叠加位置

Question

我正在使用 Angular CDK 来显示带有叠加层的元素。我的问题是我想将位置更改为右上角，但是 connectedTo 函数的所有参数都没有执行此操作。

@Component({
  template: `
    <button cdk-overlay-origin (click)="openSpaghettiPanel()">
      Pasta 3
    </button>
   `
})
export class AppComponent  {
  @ViewChild(OverlayOrigin) _overlayOrigin: OverlayOrigin;
  constructor(private _overlay: Overlay, 
              public viewContainerRef: ViewContainerRef) {

  }

  openSpaghettiPanel() {
    let strategy = this._overlay.position()
        .connectedTo(
            this._overlayOrigin.elementRef,
   {originX: 'start', originY: 'bottom'},
            {overlayX: 'end', overlayY: 'top'} );
    let config = new OverlayConfig({ width: '100px', height: '100px', positionStrategy: strategy});
    const overlayRef = this._overlay.create(config);
    const userProfilePortal = new ComponentPortal(HelloComponent, this.viewContainerRef);
    overlayRef.attach(userProfilePortal);
  }
}

我需要在 connectedTo 函数中设置哪些值才能正常工作？

Answer 1

通过查看 Angular Material 工具提示的 source code和它一起玩，看起来你不能只使用 cdk/overlay 的 API 来实现“右上角”的定位。

但实现此目的的一种简单方法是使用以下代码段将您的组件放置在您的原始元素“上方”，并在其中添加左边距。 margin 的值(value)取决于您的用例。此外，您无需设置覆盖配置的宽度和高度。

// above position
let originPos = {
  originX: 'center',
  originY: 'bottom'
}

let overlayPos = {
  overlayX: 'center',
  overlayY: 'bottom'
}

关于如何使用 @angular/cdk/overlay 的有用资源是 this .