Angular 2 指令的生命周期 Hook (ngAfterContentInit) 无法按照文档中的描述工作

Question

我试图获取元素的 offsetLeft，但我得到的值不正确，除非我使用 setTimeout。

基本上在指令中我有这个:

ngAfterContentInit() {
    console.log(this.el.nativeElement.offsetLeft);
}

文档为 ngAfterContentInit 声明了这一点“在指令的内容完全初始化后调用的生命周期 Hook 。”。但不是返回 40px，而是返回 8px(甚至不确定从哪里得到 8)。

知道为什么它不起作用吗？是不是因为指令的根元素不被视为指令的一部分，只有它的子元素才是？

Answer 1

我认为这应该可行:

ngAfterContentInit() {
    setTimeout(() => {
        console.log(this.el.nativeElement.offsetLeft);
    });
}

这是因为目前 ngAfterContentInit() 激发 child 仍然没有渲染 - 所以你需要给 Angular 时间来做到这一点。