Question

我目前正在使用Angular 2，primeNG和D3来创建特定的应用程序。

对于这个应用程序，我需要一个primeNG dataTable和一个D3可视化并排放置。

HTML结构看起来像这样，primeNG的cassandra.yaml类处理高度调整，ui-g类的行为类似于bootstrap的网格系统。

ui-g-XX

到目前为止，我没有问题。在我的浏览器中，我可以看到p-dataTable和svg元素已正确对齐。但是，d3可视化无法正确渲染，as can be seen here.基本上，在更新高度之前，可视化是使用“旧”高度值（默认svg高度为150px）绘制的（红色轮廓显示最终的svg大小））

由于primeng类在我的代码读取高度值后更新组件高度，我尝试使用各种Angular生命周期钩子来查看是否可以找到一个允许我在应用css后获得高度的钩子，但是我找不到那个。

所以我的问题是，有没有人知道如何在读取组件的高度值之前等待角度渲染整个视图？或者，如果有人有任何更好的建议方法，我将非常感谢你的帮助。

Answer 1

我只是使用超时来解决类似的问题，我需要等待一些d3元素进行渲染，从中获取属性，然后在顶部渲染更多元素

setTimeout(timer, 1500);
function timer(){... more d3.

所以这给第一个阶段渲染1.5秒，在下一个图层之前，它包含在计时器函数中。