angular - 无法更新 cdk-connected-overlay 的最小宽度

Question

我正在为此组件使用模板引用变量。这是我为下拉选项创建叠加层的方式

<ng-template
cdk-connected-overlay
[minWidth]="optionsWidth"
[open]="isOpen"
[origin]="origin"
#optionsContainer
>

<div class="options">
  <ng-content></ng-content>
</div>

即使 minwidth 值更新后， cdkconnectedoverlay 的宽度也不会改变

我尝试使用下面的覆盖参考更新它是代码

@ViewChild('optionsContainer')
  optionsContainer: CdkConnectedOverlay;

接下来我阅读了overlayref

this.optionsContainer.overlayRef

但这始终是未定义的，坚持这一点任何人都可以帮助我使用角度 cdk 5.XX 版本

Answer 1

添加 positionChange 属性并尝试代码：

this.optionsContainer.overlayRef.updateSize({minWidth: this.optionsWidth})

Answer 2

overlayRef仅在附加叠加层后才会存在。您可以订阅该attach事件以确定它何时附加，然后应用您想要的宽度。

this.optionsContainer.attach.subscribe(() => { // update width here })