Angular 2 - ElementRef.nativeElement.offSetwidth返回相同的值,即使属性已更改

时间:2016-07-18 19:48:07

标签: angularjs angular

我有一个看起来像这样的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值,我也将不胜感激。

1 个答案:

答案 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它应该按预期工作。