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＆amp;与浏览器相关的离子。

正如你所看到的，当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);
  }
}

显然，没有肮脏的技巧是去除离子的polyfills

Answer 2

这不是我非常肯定的永久解决方案; 但是正如@PiereDuc的评论所述，可以通过强制执行application.tick来解决

所以在您的主应用程序组件中（它是一个组件？）。注入ApplicationRef，然后就可以执行类似的操作。

  setInterval(() => { app.tick(); }, 400);

这很令人作呕，但它现在有效。当我知道发生了什么时，我会更新这个。

ionic2视图不更新，代码执行

2 个答案: