角度材质cdk叠加配置叠加位置

时间:2017-10-23 07:41:15

标签: javascript angular angular-material2 angular-cdk

我正在使用material/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函数中设置哪些值才能实现此功能?

0 个答案:

没有答案
相关问题