Angular CDK Overlay: как рассчитать проекцию высоты / ширины контента

Question

Hi Im с использованием Angular CDK Overlay. Одно из свойств в config - FlexibleConnectedPositionStrategy. Я пытаюсь прикрепить оверлей поверх моего триггера клика. Все работает нормально, когда сверху достаточно места для накладки. Я бы хотел проверить, не хватает ли места вверху, а затем прикрепить накладку к нижней части триггера. Для этого мне нужно после вызова Overlay.open (...) каким-то образом получить доступ к проецируемому контенту, чтобы я мог вычислить его размеры. Как это сделать?

Пока что я вижу только hacki sh способ доступа к внутреннему массиву _projectedViews [], но его недокументированную функцию. Пытаюсь найти способ чище.

Answer 1

Андрей, когда вы определяете cdk-overly, вы выбираете positionStrategy. Порядок позиций определяется в массиве withPositions. Вы можете увидеть эту ссылку (я не знаю, устарела она или нет): netanet базальное наложение cdk (на самом деле cdk-наложение материала Angular очень плохое), что я пытаюсь просто сделать в этом SO

Обычно вы импортируете оверлей и overlayPositionBuilder

constructor(public overlay: Overlay)

Вы создаете overLayRef, используя create

const overlayRef = overlay.create();

Функция create - это объект типа OverlayConfig со свойствами: Высота, ширина, maxWidth, .. и (среди прочего) positionStrategy, то есть объект типа PositionStrategy

Итак, сначала вы создаете объект типа PositionStrategy. Для этого вы можете использовать метод position() наложения

Этот объект имеет метод flexibleConnectedTo

Вы можете выбрать «подключено» к ElementRef | HTMLElement | Точка & {ширина ?: число; высота ?: число;};

это возвращает FlexibleConnectedPositionStrategy , который вы можете присвоить значение позициям (массив ConnectionPositionPair ), либо напрямую, либо используя метод withPositions

, поэтому , например,

const positionStrategy = this.overlayPositionBuilder
      .flexibleConnectedTo({ x, y })
      .withPositions([{
        originX: 'center',
        originY: 'top',
        overlayX: 'center',
        overlayY: 'bottom',
      },
      {
        originX: 'center',
        originY: 'bottom',
        overlayX: 'center',
        overlayY: 'top',
      }]);

попробуйте сначала присоединиться к вершине, но если места недостаточно, используйте вторую заданную позицию

Обновить

Ну, конечная позиция может быть заключена в setTimeout () после выполнения присоединения, например,

   //After attach
   this.overlayRef.attach(new TemplatePortal(menu, viewContainerRef, {
            $implicit: data, close:this.close
        }));
    //enclosed in a setTimeout() we has this.overlayRef.overlayElement
    setTimeout(()=>{
      console.log(this.overlayRef.overlayElement.getBoundingClientRect())
    })