Question

我有一个应用程序，其角度为7，离子4。该应用程序有一个侧面菜单，可在其中浏览不同页面。当我在列表和详细信息之间导航或添加新项目时，没有问题： Correct navigation：https://i.stack.imgur.com/Y4cpF.gif 当我在不同的菜单选项之间导航时，会重现此问题： Problem：https://i.stack.imgur.com/TqI5N.gif 第一次输入时，它可以正常运行，但是当我返回页面时，它不会加载列表。在控制台中不返回错误。我在每个页面的ngOnInit方法中检索列表。

centro-listado.page.ts

...
export class CentroListadoPage implements OnInit {

  private titulo = 'Centros';
  private centros: Centro[];

  constructor(private menu: MenuController, private loadingController: LoadingController, private centroService: CentroService,
    private router: Router, private toastService: ToastService, private alertController: AlertController) { }

  ngOnInit() {
    this.menu.enable(true);
    this.centroService.getCentros().subscribe(res =>
      this.centros = res
    );
  }
   ...
}

usuario-listado.page.ts

...
export class UsuarioListadoPage implements OnInit {

  private titulo = 'Usuarios';
  private usuarios: Usuario[];


  constructor(private menu: MenuController, private loadingController: LoadingController, private usuarioService: UsuarioService,
    private router: Router, private toastService: ToastService, private alertController: AlertController) { }

  ngOnInit() {
    this.menu.enable(true);
    this.usuarioService.getUsuarios().subscribe(res => this.usuarios = res);
  }
    ...
}

app-routing.module.ts中的路由

...
const routes: Routes = [
  {
    path: '',
    redirectTo: 'login',
    pathMatch: 'full'
  },
  { path: 'login', loadChildren: './pages/login/login.module#LoginPageModule' },
  { path: 'detalleCentro/:id', loadChildren: './pages/centro-detalle/centro-detalle.module#CentroDetallePageModule' },
  { path: 'detalleCentro', loadChildren: './pages/centro-detalle/centro-detalle.module#CentroDetallePageModule' },
  { path: 'centros', loadChildren: './pages/centro-listado/centro-listado.module#CentroListadoPageModule' },
  { path: 'usuarios', loadChildren: './pages/usuario-listado/usuario-listado.module#UsuarioListadoPageModule' },
  { path: 'detalleUsuario/:id', loadChildren: './pages/usuario-detalle/usuario-detalle.module#UsuarioDetallePageModule' },
  { path: 'detalleUsuario', loadChildren: './pages/usuario-detalle/usuario-detalle.module#UsuarioDetallePageModule' }
];

菜单html

...
<ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
            <ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
              <ion-icon slot="start" [name]="p.icon"></ion-icon>
              <ion-label>
                {{p.title}}
              </ion-label>
            </ion-item>
          </ion-menu-toggle>
...

菜单项

...
public appPages = [
    {
      title: 'Fichaje',
      url: '/fichaje',
      icon: 'create'
    },
    {
      title: 'Perfil',
      url: '/detalleUsuario/:id',
      icon: 'person'
    },
    {
      title: 'Usuarios',
      url: '/usuarios',
      icon: 'people'
    },
    {
      title: 'Centros',
      url: '/centros',
      icon: 'home'
    }
  ];
...

我希望您在页面之间导航时能正确显示列表抱歉，我无法发布图片：发布图片至少需要10个信誉。

Answer 1

创建组件时，

ngOnInit仅被调用一次。由于离子路由使用“堆叠”导航，因此，如果更改路由，则不会破坏组件。因此ngOnInit永远不会再被调用。您应该尝试ionic-lifecycle-hook：ionViewDidEnter

ionViewDidEnter() {
    this.menu.enable(true);
    this.usuarios$ = this.usuarioService.getUsuarios()
}

同样，您不应该手动订阅以避免内存泄漏。我将this.usuarios更改为this.usuarios $（可观察），因此您必须在模板中使用异步管道：

{{ usuarios$ | asnyc }}

导航到另一页时为空列表

1 个答案: