Angular UI-Router - ожидание загрузки контента

Question

Использование UI-Router с Angular 1.7, и мне нужно изменить состояние и дождаться загрузки контента, и только после этого прокрутите страницу вниз.

// 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.

Можно ли дождаться загрузки содержимого по маршруту, по которому вы идете?

Answer 1

AngularJS компоненты предоставляют функцию / обратный вызов $onInit, который запускается, когда компонент завершает загрузку, это происходит после завершения разрешения состояния, поэтому все ваши разрешения доступны, а дочерние компоненты также загрузка завершена.

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

Answer 2

Использовать разрешение ui-router. Верните обещание с данными, и оно будет легко доступно при загрузке контроллера. Нет необходимости в таймаутах

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