Question

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

所以我有一个可观察的

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

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

如果我是正确的话，则路线上的可观测对象会被角度自动破坏（我也尝试取消订阅ngOnDestroy，然后再次订阅）。当我再次回来时，它应该订阅该路由的queryParamMap并像以前一样工作。

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

Answer 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']);
  }
}

一旦离开视图并重新进入，就无法观察到离子4角路线

1 个答案: