一旦我离开视图并重新进入，可观察到的离子 4 角路线不起作用

Posted 2023-03-13

【中文标题】一旦我离开视图并重新进入，可观察到的离子 4 角路线不起作用

【英文标题】：ionic 4 angular route observable not working once I leave the view and re-enter

【发布时间】：2019-03-08 22:59:21

【问题描述】：

我有一个设置，在一个 ionic 4 页面中，我根据查询参数显示多个项目。考虑一个具有不同类别和 onclick 的列表，我将更新查询参数。

所以我有一个可观察的

this.route.queryParamMap.subscribe((data) => 
  console.error('in subscribe', data);
  this.updateCategories(data['params']);
);

当我第一次访问页面时，这很好用。但是当我导航到其他页面然后返回时，上述代码中的console.error 停止工作。

如果我是正确的，路由上的 observables 会被 angular 自毁（我也尝试在 ngOnDestroy 上取消订阅，然后再次订阅）。当我再次回来时，它应该订阅路由的 queryParamMap 并像以前一样工作。

我正在使用带有 Angular 6.0.8 的 ionic 4 beta 12。任何想法为什么会发生这种情况？

【问题讨论】：

你解决了吗？我也面临同样的问题，找不到解决办法。

【参考方案1】：

您是在 OnInit 方法中订阅还是在其他地方订阅？我尝试了您的示例代码，它在我的本地运行良好：

app.routing.ts

import  Routes, RouterModule  from '@angular/router';
import  ModuleWithProviders  from '@angular/core';

import  ParentComponent  from './parent.component';
import  NewRouteComponent  from './new-route.component';

export const routes: Routes = [
   path: '', component: ParentComponent ,
   path: 'parent', component: ParentComponent ,
   path: 'newroute', component: NewRouteComponent 
];

export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

parent.component.ts

import  Component, OnInit  from '@angular/core';
import  ActivatedRoute  from '@angular/router';

@Component(
  selector: 'app-parent',
  template: `<a routerLink="../newroute">Click here</a>`,
  styleUrls: ['./parent.component.css']
)
export class ParentComponent implements OnInit 
  constructor(private activatedRoute: ActivatedRoute)  

  ngOnInit() 
    this.activatedRoute.queryParamMap.subscribe((data) => 
      console.error('in subscribe', data);
    );
  

new-route.component.ts

import  Component, OnInit  from '@angular/core';
import  Router  from '@angular/router';

@Component(
  selector: 'app-new-route',
  template: `<p>new-route works!</p>
  <button (click)="goBack()">Back</button>`,
  styleUrls: ['./new-route.component.css']
)
export class NewRouteComponent implements OnInit 

  constructor(private activatedRoute: Router)  

  ngOnInit() 

  goBack() 
    this.activatedRoute.navigate(['./parent']);
  

【讨论】：

我尝试使用 ngOnInit、构造函数和 ionic ionViewWillEnter、ionViewDidEnter。当然不是同时，分开。代码设置类似，但不起作用。一旦我回到父级，它只会从订阅内部停止控制台日志。我会尝试在github上放一个例子。