ionic2 视图不更新，代码执行

Question

我已经稍微更新了我的项目和依赖项。 每当我第一次渲染页面时，（除了根）它不会立即工作。

F/e 我有一个根页面，它是一个登录表单。每当本地存储中存在令牌时，这将由发射器提供给登录页面。然后注入的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 和离子有关。

因此，如您所见，当触发了不符合预期的推送时，第一页继续显示加载程序。一旦加载了内容，这应该会消失（它被加载了，我看到了设置值的 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);
  }
} 

显然，最简单的方法是移除 ionic 的 polyfills

Answer 2

这不是我很确定的永久解决方案； 然而，正如@PiereDuc 的 cmets 中所述，它可以通过强制执行 application.tick 来解决

所以在您的 Main App 组件中（它是一个组件吗？）。你注入 ApplicationRef，然后你可以做类似的事情。

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

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