角.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"