寻找全局修复以防止未编译的模板闪烁
https://stackblitz.com/edit/angularjs-ui-router-transition-flicker-8bokfp?file=app.js
在上面的示例中,通过导航A和B组件,您可以看到转换发生时红色文本闪烁。
任何想法如何解决这个问题?
答案 0 :(得分:0)
由于您使用的是 UI-Router ,因此您可以尝试使用解决来处理异步请求,然后再完成转换。
我将 $ transitions.onBefore 挂钩替换为此 resolve 状态属性:
$stateProvider
.state({
name: 'a',
url: '/a',
component: 'componentA',
resolve: { delay: (delayer) => delayer.apply() }
});
其中延迟是一种应用延迟的服务。
angular.module('app')
.service('delayer', ($http) => {
return {
apply: () => {
return new Promise((resolve, reject) => {
$http.get('https://reqres.in/api/users?delay=0.5')
.then(() => {
resolve();
});
});
}
}
});
对我来说,没有闪烁,我们就会改变。