Как переместить CDK Overlay после его открытия при смене элемента overlay-origin - PullRequest
Новая
       25

Как переместить CDK Overlay после его открытия при смене элемента overlay-origin

0 голосов
/ 26 мая 2018

Я пытаюсь сделать выпадающий компонент с множественным выбором, используя наложение углового материала CDK.Как в приведенном ниже коде (взяты из компонента выбора углового материала) 

<div class="multi-select-dd">
    <label class="multi-select-dd-text">{{ label }}</label>
    <div class="multi-select-dd-text-container">
        <ul class="taggle_list"
            cdk-overlay-origin
            (click)="toggle()"
            #origin="cdkOverlayOrigin"
            #trigger>
            <li>
                <input type="text"
                       class="taggle_input"
                       tabindex="1"
                       style="padding-left: 0px; padding-right: 0px;"
                       autocomplete="off">
            </li>
        </ul>
    </div>
</div>


<ng-template cdk-connected-overlay
             cdkConnectedOverlayHasBackdrop
             cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"
             [cdkConnectedOverlayOrigin]="origin"
             [cdkConnectedOverlayOpen]="panelOpen"
             [cdkConnectedOverlayPositions]="_positions"
             [cdkConnectedOverlayMinWidth]="_triggerRect?.width"
             [cdkConnectedOverlayOffsetY]="_offsetY"
             (backdropClick)="close()"
             (attach)="_onAttached()"
             (detach)="close()">
    <div style="background-color: lightgreen;">
        <ul>
            <li>One</li>
            <li>Two</li>
            <li>Three</li>
            <li>Four</li>
            <li>Five</li>
        </ul>
    </div>
</ng-template>

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

Вопрос: Есть ли какой-либо стандартный способ в наложении, чтобы изменить его начальную позицию при изменении высоты исходного положения наложения?

1 Ответ

0 голосов
/ 19 декабря 2018

У меня возникла та же проблема, и я нашел способ обновить позицию после ее открытия. 

@ViewChild(CdkConnectedOverlay) cdkConnectedOverlay: CdkConnectedOverlay;

    constructor() { }

    ngOnInit() {
       // this is triggered when its opened for the first time and each time you modify the position
       // posChange is an Object ConnectedOverlayPositionChange that contains
       // connectionPair: with originX/Y,Overlay X/Y and offsetsX/Y
       // scrollableViewProperties
        this.cdkConnectedOverlay.positionChange.pipe(first()).subscribe(posChange => {
            // change any properties that you need about the connectedOverlay
            this.cdkConnectedOverlay.offsetY = 0;
            // this will trigger again positionChange thats why we only take the first
            this.cdkConnectedOverlay.overlayRef.updatePosition();
        });
    }
...