3

我正在使用 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函数中设置哪些值才能使其工作？

4

1 回答 1

3

通过查看 Angular Material Tooltip 的源代码并使用它，您似乎无法仅使用cdk/overlay的 API 来实现“右上角”定位。

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

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

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

关于如何使用的一个有用的来源@angular/cdk/overlay是这个。

于 2017-11-30T10:51:53.457 回答