Получить активную позицию на угловом наложении cdk?

Есть ли способ вставить прикрепленный компонент в активную позицию? Например, я говорю всплывающей подсказке открыть выше, но это невозможно сделать, и оверлей откроет его ниже. Я хочу добавить стрелку, указывающую на мой элемент, из всплывающей подсказки, и мне нужно сейчас, если наложение находится выше / ниже элемента, чтобы правильно расположить стрелку


angular angular-cdk
person Nicu    schedule 21.07.2018    source источник

Ответы (2)


arrow_upward
6
arrow_downward

ConnectedPositionStrategy (устаревший) имеет свойство onPositionChange, а FlexibleConnectedPositionStrategy - свойство positionChanges, мы не можем подписаться на эти наблюдаемые объекты до наложение создается, поэтому решение состоит в том, чтобы подписаться после создания наложения:

const positionStrategy = this.overlay
    .position()
    .flexibleConnectedTo(this.selectHeader)
    .withPositions([
     {
        originX: 'start',
        originY: 'bottom',
        overlayX: 'start',
        overlayY: 'top',
      },
      {
        originX: 'start',
        originY: 'top',
        overlayX: 'start',
        overlayY: 'bottom',
      },
    ]);
this.panelOverlay = this.overlay.create({positionStrategy});
positionStrategy.positionChanges.subscribe(pos => console.log(pos));
person Nelu B    schedule 26.09.2018
comment
Этого недостаточно, если наложение сдвигается с его стороны, исходная точка может быть отключена, поэтому расчет неверен. - person jsgoupil; 19.12.2018

arrow_upward
3
arrow_downward

Вы можете использовать "panelClass", как показано ниже:

return new OverlayConfig({
  hasBackdrop: true,
  positionStrategy: this.overlay.position()
    .flexibleConnectedTo(new ElementRef(mouseEvent.target))
    .withFlexibleDimensions(false)
    .withPositions([
      {
        originX: 'start',
        originY: 'top',
        overlayX: 'start',
        overlayY: 'top',
        panelClass: 'top' <--
      },
      {
        originX: 'start',
        originY: 'bottom',
        overlayX: 'start',
        overlayY: 'bottom',
        panelClass: 'bottom' <--
      }
    ])
})

Результат

person Ricardo Trindade    schedule 09.04.2020