Angular 2 获取 div 宽度

Question

我查看了很多帖子，但没有一个完全满足我的需求。

我有一个表格，它的宽度超出了页面的宽度，由于各种原因我需要获取它的宽度。

我使用了:

@ViewChild('tableToMeasure') elementView: ElementRef;

然后将 #tableToMeasure 放在桌子上。但是似乎出现了错误:

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'nativeElement' of undefined

尽管这仅适用于页面的父div，但仍可使用。

有什么想法吗？我需要在页面加载和页面调整大小时获取其宽度，并将另一个div的宽度更改为相同的值。

- Andrew Howard

Answer 1

@Component({
    selector: 'selector',
    template: `<button #tableToMeasure>Click me</button>`
})
export class FeatureComponent implements AfterViewInit {

    @ViewChild('tableToMeasure') elementView;

    constructor() {
    }

    ngAfterViewInit() {
        console.log(this.elementView.nativeElement);
    }
}

- Dmitrij Kuba

---

抱歉，我尝试过了，但仍然出现相同的错误。 - Andrew Howard

Answer 2

我曾经也遇到了同样的问题。我找到的解决方法其实非常简单：返回undefined是因为在您的HTML文件中没有定义'tableToMeasure'。

因此，您需要将#tableToMeasure添加到HTML元素中。

HTML文件示例代码：

<div #tableToMeasure style="width: 100px; height: 100px">
   <span>Some content!</span
</div>

在你的 TypeScript 文件中:

@ViewChild('tableToMeasure')elementView: ElementRef;

请确保从@angular/core导入ViewChild和ElementRef。

祝好运！

- Sverre Boer

Answer 3

elementView 不会在调用 ngAfterViewInit 之前被设置。如果你的代码在 ngOnInit 或构造函数中，你就会收到这个错误。

- Günter Zöchbauer

---

那么我必须在ngAfterViewInit()中使用它吗？ - Andrew Howard

无论是在 ngAfterViewInit 中还是稍后执行的任何内容，例如对用户操作（单击、滚动等）的事件处理程序中。 - Günter Zöchbauer

嗯，我尝试在ngAfterViewInit()上使用它，但仍然出现相同的错误。 - Andrew Howard

啊，它可以工作，但你必须先检查是否有值，因为它会在元素实际准备好之前首次触发。if ((this.elementView != null)) {} 感谢您的帮助 :) - Andrew Howard

也许你的 #tableToMeasure 在一个 *ngIf 中，否则当 ngAfterViewInit 被调用时它会有一个值。 - Günter Zöchbauer