Как сохранить компонент наложения Angular CDK внутри страницы на основе смещения страницы - PullRequest
Новая
       24

Как сохранить компонент наложения Angular CDK внутри страницы на основе смещения страницы

0 голосов
/ 18 ноября 2018

Я работаю над своей библиотекой Contexr . Я просто реорганизовал свое приложение, чтобы использовать Angular CDK Overlay для отображения контекстного меню, поэтому мне больше не нужно включать какой-либо компонент в реальное приложение (на один шаг меньше установки).

Однажды я использовал FlexibleConnectedPositionStrategy , чтобы создать раскрывающийся список под элементом, который будет находиться на странице. Эта стратегия позиции создается как с использованием ElementRef: 

const positionStrategy = this.overlay.position()
      .flexibleConnectedTo(elementRef)
      .left(state.left + 'px')
      .top(state.top + 'px');

Проблема в том, что у меня нет ElementRef для перехода. Мое наложение должно быть гибким, связанным с моими .left () и .top (). Есть ли способ сделать это с FlexibleConnectedPositionStrategy? В настоящее время я пытаюсь использовать GlobalPositionStrategy, но это не учитывает элементы, выходящие за пределы экрана.

Класс, открывающий оверлей: 

@Injectable({
  providedIn: 'root'
})
export class ContextMenuService {
  private overlayRef: OverlayRef;

  constructor(private overlay: Overlay, private injector: Injector) {}

  public open(state: ContextState) {
    const overlayConfig = this.getOverlayConfig(state);
    this.overlayRef = this.overlay.create(overlayConfig);
    const contextMenuRef = new ContextMenuOverlayRef(this.overlayRef);
    this.attachDialogContainer(this.overlayRef, state, contextMenuRef);
  }

  private getOverlayConfig(state: ContextState) {
    const positionStrategy = this.overlay.position()
      .global()
      .left(state.left + 'px')
      .top(state.top + 'px');

    return {
      positionStrategy: positionStrategy
    };
  }

  private createInjector(state: ContextState, dialogRef: ContextMenuOverlayRef) {
    const injectionTokens = new WeakMap();
    injectionTokens.set(ContextMenuOverlayRef, dialogRef);
    injectionTokens.set(CONTEXT_MENU_OVERLAY_DATA, state);
    return new PortalInjector(this.injector, injectionTokens);
  }

  private attachDialogContainer(overlayRef: OverlayRef, state: ContextState, contextMenuOverlayRef: ContextMenuOverlayRef) {
    const injector = this.createInjector(state, contextMenuOverlayRef);
    const containerPortal = new ComponentPortal(ContextMenuComponent, null, injector);
    overlayRef.attach(containerPortal);
  }

  public close() {
    if (this.overlayRef) {
      this.overlayRef.dispose();
    }
  }
}

Ответы [ 2 ]

0 голосов
/ 19 ноября 2018

Оказывается, вы можете использовать FlexibleConnectedPositionStrategy в конце концов. Я нашел библиотеку контекстного меню на Github, которая называется ngrx-rightclick (спасибо!). Здесь они создали новый ElementRef на основе события click. 

private getOverlayConfig(event: MouseEvent, state: ContextState) {
    const target = {
      getBoundingClientRect: (): ClientRect => ({
        bottom: event.clientY,
        height: 0,
        left: event.clientX,
        right: event.clientX,
        top: event.clientY,
        width: 0,
      }),
    };

    const element = new ElementRef(target);

    const positionStrategy = this.overlay.position()
      .flexibleConnectedTo(element)
      .withFlexibleDimensions(false)
      .withPositions([
        {
          originX: 'end',
          originY: 'top',
          overlayX: 'start',
          overlayY: 'top',
        },
        {
          originX: 'start',
          originY: 'top',
          overlayX: 'end',
          overlayY: 'top',
        },
        {
          originX: 'end',
          originY: 'bottom',
          overlayX: 'start',
          overlayY: 'bottom',
        },
        {
          originX: 'start',
          originY: 'bottom',
          overlayX: 'end',
          overlayY: 'bottom',
        },
      ]);

    return {
      positionStrategy: positionStrategy
    };
  }
0 голосов
/ 19 ноября 2018

Я посмотрел исходный код в GitHub.Поскольку вы используете директиву для присоединения контекстного меню к элементу, вы также можете получить ссылку на элемент в директиве.Просто добавьте его в конструктор директивы, затем отправьте его в службу, и он будет доступен.Вот ваш класс, модифицированный, чтобы получить также ElementRef: 

import {Directive, HostListener, Input} from '@angular/core';
import {ContexrService} from '../providers/contexr.service';

@Directive({
  selector: '[ctx]'
})
export class ContextDirective {
  @Input('ctx') ctx: string;
  @Input('ctxArgs') ctxArgs: any;

  constructor(private contexr: ContexrService, private elementRef: ElementRef<any>) {}

  @HostListener('contextmenu', ['$event'])
  @HostListener('click', ['$event'])
  public onContextMenu(event) {
    this.contexr.addCurrentContext(this.ctx, this.ctxArgs, this.elementRef);
  }
}
...