Question

从组件内部，我需要在页面完成加载后获得组件的实际宽度。我认为我得到的值实际上更接近整个窗口的宽度。

我的组件标记：

<div>
The width of this component is {{ componentWidth }} px.
</div>

它的.ts：

import { Component, OnInit, ElementRef } from '@angular/core';

@Component({
   selector: 'app-my-component',
   templateUrl: './app-my-component.html',
   styleUrls: ['./app-my-component.scss']
})
export class MyComponent implements OnInit {
   private componentWidth: number;

   constructor(private elementRef: ElementRef) {
   }

   ngOnInit() {
       this.componentWidth = this.elementRef.nativeElement.offsetWidth;
   }
}

.scss文件：

:host {
  display: block;
  width: 100%;
  height: 100%;
}

现在，此组件位于页面的html标记上，该页面的.ts文件默认为ng g component Home创建的文件，其中Home是页。它的.scss是空的。这是home.html：

<div>
   home works!
   <app-my-component>
   </app-my-component>
</div>

没有什么太花哨的了。但是，我还需要向您展示我的app.component.html：

<div>
  <nav>...</nav>
  <div class="router-outlet">
    <router-outlet></router-outlet>
  </div>
</div>

app.component.scss：

.router-outlet {
   padding: 10px;
 }

现在，当我运行它时，页面上的输出结果是，在我的情况下，1420像素。但是，当我在Firefox上检查该组件时，它说该组件实际上只有1403像素。如果我检查整个文件，它是1423像素宽。我看到组件两侧的10px填充已应用，我看到整个文档与我的组件之间的差异为20px。我有几个问题。

elementRef.nativeElement.offsetWidth如何变成1420px，更接近视口的整个宽度，1423px？

3px差异来自何处？

我是否应该收听特定事件，而不是在elementRef中获取宽度值ngOnInit()？

如果你想知道为什么我需要获得宽度值，我可能需要这一天游戏，我相信需要知道组件的确切宽度。

Angular elementRef.nativeElement.offsetWidth的值与浏览器

0 个答案: