Угловой материал cdk наложение настроить положение наложения

Question

Угловой материал cdk наложение настроить положение наложения

1

Я использую 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 для этого?

JsFan 23 окт. 2017, в 10:31

Источник

Теги:

angular

javascript

angular-material2

angular-cdk

1 ответ

Ещё вопросы

tasos · Answer 1 · 2017-11-30T08-22-00.000Z

Изучая исходный код всплывающей подсказки Angular Material Tooltip и играя с ним, похоже, что вы не можете достичь позиционирования "сверху вниз" только с использованием API cdk/overlay.

Но простой способ добиться этого - разместить компонент "выше" вашего исходного элемента, используя следующий фрагмент и добавить в него левое поле. Значение маржи зависит от вашего варианта использования. Также вам не нужно устанавливать ширину и высоту конфигурации наложения.

// above position
let originPos = {
  originX: 'center',
  originY: 'bottom'
}

let overlayPos = {
  overlayX: 'center',
  overlayY: 'bottom'
}

Полезным источником того, как использовать @angular/cdk/overlay является это.