Angular CDK Overlay 配置覆盖位置答案

【问题标题】：Angular CDK Overlay configure overlay positionAngular CDK Overlay 配置覆盖位置
【发布时间】：2017-10-23 07:41:14
【问题描述】：

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

【问题讨论】：

标签： angular angular-cdk

【解决方案1】：

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

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

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

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

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

【讨论】：