css Angular ：当浏览器宽度改变时，获取div元素的正确宽度值

jxct1oxe 于 2023-02-20 发布在 Angular

关注(0)|答案(1)|浏览(301)

我有一个div元素，如果浏览器的宽度小于或等于dv元素的宽度，它会自动缩小，为此我使用了ngAfterViewChecked（），但是当div元素自动改变宽度时，我得到了一个错误。
test.component.html:

<div style="display:inline" #myContainer>
   //this is only an example
   <div>
     <li>...</li>
     <li>...</li>
     <ng-container *ngIf="coOffset <= winWidth;">
       <li>...</li>
       <li>...</li>
     </ng-container>
   <div>
</div>

test.component.ts:

public coOffset: number;
public winWidth: any;
@ViewChild('myContainer') coRef: ElementRef;

onResize(event) {
  this.winWidth = window.innerWidth;
}

ngAfterViewInit (): void {
  this.coOffset = this.coRef.nativeElement.offsetWidth;
}

ngAfterViewChecked(): void {
  this.coOffset = this.coRef.nativeElement.offsetWidth;
  this.cd.detectChanges();
}

错误消息显示：表达式在选中后更改错误：表达式在选中后已更改。以前的值：...
我在网上找到了很多例子，但是都不能解决我的问题。有人能帮我吗？谢谢

css

来源：https://stackoverflow.com/questions/75499833/angular-get-the-correct-width-value-of-a-div-element-when-the-browser-width-cha

1条答案

按热度按时间

zphenhs41#

唯一缺少的是ngAfterViewInit中的ChangeDetectorRef。我重现了相同的问题，并通过在ngAfterViewInit中添加detectChanges进行了修复。以下是ts文件的完整代码

import {  ChangeDetectorRef, Component, HostListener, ViewChild } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass']
})
export class AppComponent  {
  public coOffset: any;
  public winWidth: any;
  @HostListener('window:resize', ['$event'])
  onResize() {
    this.resized();
  }

  @ViewChild('myContainer') coRef: any;
  
  constructor(public cd: ChangeDetectorRef)
  {
    this.winWidth = window.innerWidth;
  }
  
  ngAfterViewInit (): void {
    this.coOffset = this.coRef.nativeElement.offsetWidth;
    this.cd.detectChanges();
  }

  resized(): void {
    this.coOffset = this.coRef.nativeElement.offsetWidth;
    this.cd.detectChanges();
  }
}

此外，请看下面的链接，以查看问题和解决方案的视觉：TestWise Replay | StackOverFlow QA - Angular: Get the correct width value of a div element when the browser width changes

赞(0）回复(0）举报 2023-02-20

我来回答

css Angular ：当浏览器宽度改变时，获取div元素的正确宽度值

1条答案

相关问题

热门标签

最新问答