Angular UI-Router - 等待内容加载答案

【问题标题】：Angular UI-Router - wait for content to loadAngular UI-Router - 等待内容加载
【发布时间】：2020-05-02 13:47:50
【问题描述】：

在 Angular 1.7 中使用 UI-Router，我需要更改状态并等待内容加载，然后滚动到页面底部。

// Class method
onCreate() {
    this.post().then(response => {
        this.$state.go('root.post.edit', { postId: response.data.id });
        this.Alert.register('success');
    })
    .then(() => scrollToBottom()) // This happens too soon
    .catch(e => this.handleError(e));
}

//scrollToBottom.js
const scrollToBottom () => {
    const scrollContainer = document.querySelector('.app-page-content');
    scrollContainer.scrollTop = scrollContainer.scrollHeight;
};

如果我将 scrollToBottom 函数内容包装在 setTimeout(() => {...}, 600) 中，那么它就有时间加载并滚动到加载页面的底部。但是，没有它，页面没有高度，因为它在计算 scrollContainer.scrollHeight 时处于加载状态。

有没有办法等待内容加载到您要导航的路线上？

【问题讨论】：

标签： javascript angularjs dom routes angular-ui-router

【解决方案1】：

使用 ui-router 解析。返回带有数据的 Promise，当控制器加载时它就可以使用了。无需超时

https://github.com/angular-ui/ui-router/wiki#resolve

【讨论】：

谢谢！我会试试看。我在将其与 $state.go() 集成的文档中看不到任何示例。有什么想法吗？
如果您将解析集成到您需要的路线上。 $state.go 将简单地工作。
啊，我明白了，所以它会在加载该路由的任何时候被调用？我只需要在特定情况下调用它，例如我的代码示例中的 onCreate 方法。例如，我还有一个 onPublish 方法，它使用 $state.go() 导航到同一条路线，但我不希望调用我的滚动函数
是的，只要将状态导航到，解析就会起作用。您可以使用标志来滚动或不滚动。

【解决方案2】：

AngularJS 组件公开了在组件完成加载时运行的 $onInit 函数/回调，这发生在状态解析完成之后，因此您的所有解析都可用并且子组件也完成加载。

// inside your controller
this.$onInit = function() {
    // ... other initializations ...
    scrollToBottom();
}

【讨论】：

我发现的问题是因为我的组件有很多子组件，即使父组件本身已经初始化，所有子组件都没有完成渲染。这意味着它滚动到页面底部，但随后添加了更多内容，而您仅位于页面的一半
那么 ui-router 可能无法满足您需要的解决方案，因为这些组件在转换完成后会加载很多。其他选项可以是监视值或注册在一组组件完成加载/渲染时运行的回调等。
是的，我在其他问题中发现了很多关于这是一般 AngularJs 开发问题的讨论。没有可靠的方法可以使用任何内置方法来检查所有组件和子项是否已加载以及所有模型是否已更新和绑定等...使用$timeout() 等待摘要周期完成有帮助，但再次没有足够可靠，可以知道加载了多少子组件。我不得不在这里改变方法并改变 UI，这样我就不需要滚动了：（不幸。
我想你必须事先知道有多少组件需要初始化并编写一些逻辑来检查它们的进度并在它们全部完成时执行某些操作，我可能会使用一系列承诺和利用 $q.all 在它们全部解析时回调，当需要加载新组件时，重新创建另一个队列等等