Question

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

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

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

Answer 1

我遇到了同样的问题，我发现用这种方法可以在打开头寸后对其进行更新。

@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();
        });
    }

Answer 2

找到了一种更简单的方法。

     // 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覆盖！很好。

如何在更改overlay-origin元素时打开CDK重叠位置

2 个答案: