角。 CDK 覆盖。在模板中设置 positionStrategy 到灵活

Question

如何通过模板设置灵活的仓位策略？有什么方便的方法来创建仓位策略实例吗？

        <button
            (mouseover)="isOpen = true" 
            (mouseout)="isOpen = false"
            cdkOverlayOrigin
            #trigger="cdkOverlayOrigin"
    >CLICK
    </button>

    <ng-template
            cdkConnectedOverlay
            [cdkConnectedOverlayOrigin]="trigger"
            [cdkConnectedOverlayOpen]="isOpen"
            [cdkConnectedOverlayScrollStrategy]="closeStrategy"
            [cdkConnectedOverlayPositionStrategy]=????
    ><div>CONTENT</div>
    </ng-template>

Answer 1

添加一个变量位置并在 HTML 中引用它

yourComponent.ts
    .
    .
    .
public positions = [
   new ConnectionPositionPair({
       originX: 'end',
       originY: 'top'},{
       overlayX: 'end',
       overlayY: 'bottom'},
       0,
       50)
];

yourComponent.html
    .
    .
    .
[cdkConnectedOverlayPositionStrategy]="positions"