附加后动态改变角材料覆盖位置

Question

有许多需要在window-resize事件后重新定位的覆盖。

当前初始配置的PositionStrategy具有依赖于外部变量的逻辑来对Overalys，类似于CSS / Flexbox行为。

此material2 github问题似乎表示只能使用OverlayRef.dispose() => OverlayRef.create()。

是否有满足下列条件的解决办法：

• 可以用非静态值更新位置。
• 不会破坏组件实例。

最好能从服务中调用，而不是OverlayRef的组件实例。

为了清晰起见，编辑1:考虑到下面的PositionStrategy，OverlayRef.updatePosition()似乎不适用，因为需要重新计算px。*注window.innerWidth

      private setChannelPosition(): PositionStrategy {
        const chatWidth = 280;
        const chatSpace = 5;
        const distanceFromEdge = 80;

        const existingModalCount = this.channelModals.size;
        const numModalsCanFit = 
           Math.floor((window.innerWidth - 2 * distanceFromEdge) / (chatWidth + chatSpace));
        const distFromRight = 
           distanceFromEdge + ((existingModalCount % numModalsCanFit) * (chatWidth + chatSpace));
        return this.overlay.position().global().bottom('0px').right(`${distFromRight}px`);
      }

编辑2:模态是瞬态的。因此，使用flexibleConnectedTo()的解决方案似乎不适用，因为任何模式都可能或不被用户按任何顺序关闭。

Answer 1

假设在生成setChannelPosition()时只调用OverlayConfig一次，如下所示：

export class MyComponent implements OnInit {

  private overlayRef: OverlayRef;

  constructor(
    private overlay: Overlay
  ) { }

  public ngOnInit(): void {
    this.createOverlay();
  }

  @HostListener('window:resize')
  public onResize(): void {
    this.overlayRef.updatePosition();
  }

  private setChannelPosition(): PositionStrategy {
    const chatWidth = 280;
    const chatSpace = 5;
    const distanceFromEdge = 80;

    const existingModalCount = this.channelModals.size;
    const numModalsCanFit =  Math.floor((window.innerWidth - 2 * distanceFromEdge) / (chatWidth + chatSpace));
    const distFromRight = distanceFromEdge + ((existingModalCount % numModalsCanFit) * (chatWidth + chatSpace));
    return this.overlay.position().global().bottom('0px').right(`${distFromRight}px`);
  }

  private createOverlay() {
    const config = new OverlayConfig({
      positionStrategy: this.setChannelPosition()
    });
    this.overlayRef = this.overlay.create(config);
    this.overlayRef.attach(/* template or component*/);
  }

}

因此，this.overlay.position().global().bottom('0px').right(${distFromRight}px);行只运行一次，创建一个底部为0px的GlobalPositionStrategy，它的严格程度是distFromRight当时的值。

OverlayRef.updatePosition()调用PositionStrategy.apply()，GlobalPositionStrategy实现它，并简单地根据其属性应用css值(在本例中是底层0px，而在setChannelPosition()运行时，严格程度是distFromRight的值)。

解决方案是让PositionStrategy在PositionStrategy.apply()上重新计算。

class MyPositionStrategy implements PositionStrategy {
  public apply(): void {
    /* recalculates */
  }
}

const config = new OverlayConfig({
 positionStrategy: instanceOfMyPositionStrategy 
});

ruff例子

或

在调用PositionStrategy之前更改OverlayRef.updatePosition()，我认为调用OverlayRef.updatePositionStrategy()是新的角质层材料7。

@HostListener('window:resize')
public onResize(): void {
  this.overlayRef.updatePositionStrategy(this.setChannelPosition());
  this.overlayRef.updatePosition();
}

因此，每次窗口调整大小时，setChannelPosition()都会运行，PositionStrategy也会发生变化。

ruff例子

注意：

有一个古老的解决方案

@HostListener('window:resize')
public onResize(): void {
  this.overlayRef.getConfig().positionStrategy = this.setChannelPosition();
  this.overlayRef.updatePosition();
}

但是getConfig().positionStrategy现在是只读的，不能工作