Angular

Question

我正在使用内部私有可重用组件。我的问题是当视口更新时宽度没有动态更新。以下是相关代码片段：

component.ts

export class Component {
    modalWidth: string | undefined;
    
    ngOnInit() {
        this.breakpointServiceSubscription$ = this.breakpointService.breakpoint$.subscribe(() => {
           if (this.breakpointService.isSmall()) {
               console.log("small")
               this.modalWidth = "50px";
           }
           else {
               this.modalWidth = "500px";
      }
    }

}

component.html

<modal [width]="modalWidth">...</modal>

宽度和高度应该会随着浏览器大小的调整而动态变化，但它会保持与渲染时相同的大小。如果我在特定视口中打开模态框，大小始终正确，这只是我尝试在打开模态框的情况下调整大小时的问题。

登录断点服务订阅时，总是正确的，会动态记录。

我已经尝试将 modalWidth 和 modalHeight 转换为可观察对象并在 html 中使用异步管道，但它仍然具有相同的行为。

有什么提示或建议吗？

Answer 1

您可以在组件中注入 ChangeDetectorRef 并在更改 modalWidth 后调用 changeDetectorRef.detectChanges() 让 angular 立即将更改应用到视图。

constructor(private cdr: ChangeDetectorRef) {}

 ngOnInit() {
        this.breakpointServiceSubscription$ = this.breakpointService.breakpoint$.subscribe(() => {
           if (this.breakpointService.isSmall()) {
               console.log("small")
               this.modalWidth = "50px";
           }
           else {
               this.modalWidth = "500px";
      }
      // apply change immediately
      this.cdr.detectChanges();
    }

Angular - 未更新组件的动态大小

Angular - Dynamic size of component not being updated

html

javascript

web-component