angular - ionic2 View 不更新,代码执行

标签 angular ionic2

我已经稍微更新了我的项目和依赖项。 每当我第一次呈现页面时,(根除外)它不会立即工作。

F/e 我有一个根页面,它是一个登录表单。每当 localStorage 中存在 token 时,发射器就会将其提供给登录页面。然后注入(inject)的 NavController,推送我的主页面,一个 TabController。

这不会立即发生,我可以挖 Nose ,去洗手间,它会保留在根页面上。它只会在我真正关注我的输入时推送新 View 。 (当它无法呈现页面时它也会显示一点黑色,当您做错某事时 ionic 会崩溃。

然后在选项卡页面上,第一个选项卡不呈现,但是当我单击第一个选项卡时它会呈现,其他选项卡也一样,需要单击两次(选项卡栏只有在您单击两次时才会激活) ).在此之后一切正常,但肯定不是我们想要的。 这是我所看到的视频。如果您在 0.0 处暂停视频,您会看到日志状态 Token successfull。这就像在代码中一样,就在推送之前。新页面已启动,在我单击输入等元素之前, View 似乎没有更新。

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”按钮(注意我单击的是第三个)。单击第四个会呈现第三个页面,在此之后,它们会被呈现一次并且点击会按预期工作。

奇怪吗?

最佳答案

您可以尝试使用 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 的 polyfill

关于angular - ionic2 View 不更新,代码执行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36062048/

相关文章:

html - Angular 顺序路由器动画

javascript - 需要更改 Angular 2 中的日期格式

android - Ionic 2 侧边菜单在按下数次后不起作用

node.js - npm 安装 ts-md5 错误

angular - 选项卡页面中的函数加载了两次

ionic2 - 如何在 Ionic 2 中获取 OneSignal 播放器 ID

javascript - 如何在 Angular 中通过自定义指令添加 mattooltip

Angular 库 : Separate HttpInterceptor

javascript - 如何更新使用 ReactDOM.render() 渲染的 React Component 的 props

angular - Google Places API - Angular 2/Typescript/Ionic 2