我有一个看起来像这样的html元素:
<h1 [style.font-size.em]="mysize" id="title-text" #titleText>{{ screenInfo.title }}</h1>
其中mysize是一个控制h1标签字体大小的变量。 h1元素的宽度由内容的fontsize确定。
我用
获取对h1标签的引用 @ViewChild('titleText') titleTextElement;
如果我运行以下代码,我会得到以下结果
console.log(this.titleTextElement.nativeElement.offsetWidth);
// returns 632px, which is the correct width.
this.mysize *= 0.9;
console.log(this.titleTextElement.nativeElement.offsetWidth);
// returns 632px, but the new width is 572px.
任何人都可以解释为什么这不起作用?如果有人能够展示我如何获得更新的offSetwidth值,我也将不胜感激。
答案 0 :(得分:4)
仅在运行更改检测时更新视图。
您可以手动调用更改检测,如:
constructor(private cdRef:ChangeDetectorRef) {}
...
console.log(this.titleTextElement.nativeElement.offsetWidth);
// returns 632px, which is the correct width.
this.mysize *= 0.9;
this.cdRef.detectChanges();
console.log(this.titleTextElement.nativeElement.offsetWidth);
// returns 632px, but the new width is 572px.
ant它应该按预期工作。