Angular CDK Overlay FlexibleConnectedTo не подключается к источнику - PullRequest
Новая
       9

Angular CDK Overlay FlexibleConnectedTo не подключается к источнику

1 голос
/ 28 апреля 2020

Я бы хотел подключить оверлей angular cdk к кнопке на моей панели инструментов. Вот что я получил:

кнопка наложения. html: 

<button mat-menu-item #overlayButton (click)="showOverlay()"> open </button>

overlay-button.component 

export class OverlayButtonComponent {
  @ViewChild('overlayButton') private _button: ElementRef;

  constructor(private _overlay: OverlayService) {}

  showOverlay() {
    this._overlay.open(DisplayedComponent,this._button);
  }
}

overlay.service 

export class OverlayService {
  constructor(private _overlay: Overlay) {}

  open(comp: ComponentType<any>, connectedTo:ElementRef) {
    const positionStrategy = this._overlay.position()
      .flexibleConnectedTo(connectedTo)
      .withPositions([{
        originX: 'start',
        originY: 'bottom',
        overlayX: 'start',
        overlayY: 'top',
      }]);

    const overlayRef = this._overlay.create({
      hasBackdrop: true,
      positionStrategy,
      scrollStrategy: this._overlay.scrollStrategies.reposition()
    });

    // Create ComponentPortal that can be attached to a PortalHost
    const filePreviewPortal = new ComponentPortal(comp);

    // Attach ComponentPortal to PortalHost
    overlayRef.attach(filePreviewPortal);

    overlayRef.backdropClick().subscribe(() => overlayRef.detach());
  }
}

Проблема в том, что оверлей всегда отображается в левом верхнем углу браузера. Сначала я подумал, что есть проблема с viewChild, возможно, elementRef не определен или что-то в этом роде, но это не так. Я пробовал каждый учебник с похожим кодом, но ничего не получалось. Может ли проблема быть где-то еще?

Вот иллюстрация того, как это:

overlay problem

...