时间戳

首页 > 解决方案 > 一旦我离开视图并重新进入，可观察到的离子 4 角路线不起作用

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

问题描述

我有一个设置，在单个 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。任何想法为什么会发生这种情况？

标签： angularangular-routerionic4

解决方案

您是订阅 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);

父组件.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);
    });
  }

}

新路由.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']);
  }
}

推荐阅读