ionic2视图不更新,代码执行

Question

我已经更新了我的项目和依赖项.每当我第一次渲染页面时,(除了root)它都无法立即生效.

F/e我有一个根页面,这是一个登录表单.每当令牌出现在localStorage中时,这将由发射器提供给登录页面.然后注入的NavController,推送我的主页面,一个TabController.

这不会马上发生,我可以捡起我的鼻子,去卫生间它停留在根页面上.当我实际关注输入时,它只会推送新视图.(当你做错了什么时,当它无法呈现页面时会显示一些黑色并且会出现离子崩溃.

然后在选项卡页面上,第一个选项卡不会渲染,但是当我单击第一个选项卡时,相同的其他选项卡,它们需要被单击两次(标签栏仅在您单击两次时变为活动状态).在此之后,一切正常,但肯定不是我们想要的.这是我所看到的视频.如果您将视频暂停为0.0,则会看到日志状态令牌成功.这就像代码中一样,就在推送之前.启动新页面,在我单击输入之类的元素之前,视图似乎不会更新.

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.

正如你所看到的那样,当Push被触发时没有;看起来应该如此,第一页继续显示一个加载器.一旦加载了内容,它就会消失(加载后我看到了设置值的console.logs触发器).如果我现在点击第一个标签项2次,它会显示内容.我选择单击"Acties"按钮,该按钮呈现第一个选项卡(注意我点击了第三个选项卡).单击第四页将呈现第三页,此后,它们已呈现一次,并按预期单击工作.

奇怪？

Answer 1

您可以尝试添加脏修复程序 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);
  }
} 

显然,没有肮脏的技巧是去除离子的polyfill