1

我正在尝试使用角度材料 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>

因此，无论何时从下拉列表中选择一个项目，它都会在方框中显示为一个芯片，即连接位置。这将改变原点元素的高度。

问题：叠加层中是否有任何标准方法可以在叠加层原点高度变化时重新定位它的 startY 位置？

4

2 回答 2

2

我遇到了同样的问题，我发现这种方法可以在开仓后更新仓位。

@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();
        });
    }
于 2018-12-19T09:51:29.947 回答
0

找到了更简单的方法。

     // data you want to show is contained in the matDialogConfig
     let mc = this.getConfig(data);
     // Tell Matdialog which Angular component to use.
     let mdRef = this.md.open(MessageComponent, mc);

从 MessageComponent 中获取数据

    import { MAT_DIALOG_DATA } from "@angular/material/dialog";
    import { Component, OnInit, AfterViewInit, Inject } from "@angular/core";
    import { inject } from "@angular/core/testing";
    
    @Component({
      selector: "lib-message",
      templateUrl: "./message.component.html",
      styleUrls: ["./message.component.css"],
    })
    export class MessageComponent implements OnInit, AfterViewInit {
      constructor(@Inject(MAT_DIALOG_DATA) public data: any) {
        // get the injected dialog data
        this.data = data;
      }
    
      ngOnInit(): void {}
      ngAfterViewInit() {}
    }

在 HTML 中，这只是需要的标记。


    {{data}}

MessageComponent 中的 CSS 允许完全控制位置。


    :host {
        display: grid;
        justify-content: center;
        align-items: center;
        background-color: yellow;
        position: absolute;
        top: 10em;
        left: 20em;
        height: 10em;
        width: 20em;
        box-shadow: 0 0 5px rgb(0, 0, 0, 0.27);
    }

您的消息组件优先于 CDK 覆盖！非常好。

于 2020-06-23T20:22:14.263 回答