ionic2 视图不更新,代码执行
ionic2 Views do not update, code does execute
我已经稍微更新了我的项目和依赖项。
每当我第一次呈现页面时,(根除外)它不会立即工作。
F/e 我有一个根页面,它是一个登录表单。每当 localStorage 中存在令牌时,发射器就会将其提供给登录页面。然后注入的 NavController,推送我的主页面,一个 TabController。
这不会立即发生,我可以挖鼻子,去洗手间它留在根页面上。它只会在我真正关注我的输入时推送新视图。 (当它无法呈现页面时它也会显示一点黑色,当你做错什么时离子崩溃。
然后在标签页上,第一个标签不呈现,但是当我点击第一个标签时它会呈现,其他标签也一样,需要点击两次(标签栏只有在你点击两次时才会激活以及)。在此之后一切正常,但肯定不是我们想要的。
这是我所看到的视频。如果您在 0.0 处暂停视频,您会看到日志状态 Token successfull。这就像在代码中一样,就在推送之前。新页面已启动,直到我单击输入之类的元素之前,视图似乎没有更新。
ngOnInit() {
this.sessionService.subscribe(token => {
if (token && token.length) {
console.log("token returned success!", token, this.navController);
setTimeout( () => { this.navController.push(<any>MainTabs); }, 250 );
} else {
console.log("token returned", token);
}
});
}
日志中的错误与浏览器相关的 angular2 和 ionic。
因此,如您所见,当推送被触发时,它看起来并不像它应该的那样,第一页一直显示加载程序。一旦内容被加载,这应该消失(它被加载我看到设置值的 console.logs 触发器)。如果我现在单击第一个选项卡项 2 次,它就会显示内容。
我选择单击呈现第一个选项卡的 "Acties" 按钮(注意我单击的是第三个)。单击第四个呈现第三页,在此之后,它们已呈现一次并按预期工作。
奇怪?
我很确定这不是永久的解决方案;
然而,正如@PiereDuc 的评论中所述,可以通过强制 application.tick
来解决
因此在您的 Main App 组件中(它是一个组件吗?)。你注入 ApplicationRef,然后你可以做类似的事情。
setInterval(() => { app.tick(); }, 400);
这很恶心,但目前有效。当我知道发生了什么时,我会更新它。
您可以尝试使用 tick()
添加脏修复
@App({
template: `
<ion-tabs (change)="_onTabChange()">
<ion-tab tabIcon="heart" [root]="tab1"></ion-tab>
<ion-tab tabIcon="star" [root]="tab2"></ion-tab>
</ion-tabs>`
})
class MyApp {
constructor(private _applicationRef : ApplicationRef) {
this.tab1 = Tab1;
this.tab2 = Tab2;
}
private _onTabChange() : void {
setTimeout(() => {
this._applicationRef.tick();
}, 200);
}
}
显然 none 肮脏的把戏是删除 ionic 的 polyfills
我已经稍微更新了我的项目和依赖项。 每当我第一次呈现页面时,(根除外)它不会立即工作。
F/e 我有一个根页面,它是一个登录表单。每当 localStorage 中存在令牌时,发射器就会将其提供给登录页面。然后注入的 NavController,推送我的主页面,一个 TabController。
这不会立即发生,我可以挖鼻子,去洗手间它留在根页面上。它只会在我真正关注我的输入时推送新视图。 (当它无法呈现页面时它也会显示一点黑色,当你做错什么时离子崩溃。
然后在标签页上,第一个标签不呈现,但是当我点击第一个标签时它会呈现,其他标签也一样,需要点击两次(标签栏只有在你点击两次时才会激活以及)。在此之后一切正常,但肯定不是我们想要的。 这是我所看到的视频。如果您在 0.0 处暂停视频,您会看到日志状态 Token successfull。这就像在代码中一样,就在推送之前。新页面已启动,直到我单击输入之类的元素之前,视图似乎没有更新。
ngOnInit() {
this.sessionService.subscribe(token => {
if (token && token.length) {
console.log("token returned success!", token, this.navController);
setTimeout( () => { this.navController.push(<any>MainTabs); }, 250 );
} else {
console.log("token returned", token);
}
});
}
日志中的错误与浏览器相关的 angular2 和 ionic。
因此,如您所见,当推送被触发时,它看起来并不像它应该的那样,第一页一直显示加载程序。一旦内容被加载,这应该消失(它被加载我看到设置值的 console.logs 触发器)。如果我现在单击第一个选项卡项 2 次,它就会显示内容。 我选择单击呈现第一个选项卡的 "Acties" 按钮(注意我单击的是第三个)。单击第四个呈现第三页,在此之后,它们已呈现一次并按预期工作。
奇怪?
我很确定这不是永久的解决方案; 然而,正如@PiereDuc 的评论中所述,可以通过强制 application.tick
来解决因此在您的 Main App 组件中(它是一个组件吗?)。你注入 ApplicationRef,然后你可以做类似的事情。
setInterval(() => { app.tick(); }, 400);
这很恶心,但目前有效。当我知道发生了什么时,我会更新它。
您可以尝试使用 tick()
@App({
template: `
<ion-tabs (change)="_onTabChange()">
<ion-tab tabIcon="heart" [root]="tab1"></ion-tab>
<ion-tab tabIcon="star" [root]="tab2"></ion-tab>
</ion-tabs>`
})
class MyApp {
constructor(private _applicationRef : ApplicationRef) {
this.tab1 = Tab1;
this.tab2 = Tab2;
}
private _onTabChange() : void {
setTimeout(() => {
this._applicationRef.tick();
}, 200);
}
}
显然 none 肮脏的把戏是删除 ionic 的 polyfills