我想在 ionic 4 页面之间传递数据

Question

我想在 ionic 4 页面之间传递数据而不改变 url。

代码：

app-routing.module.ts

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: './home/home.module#HomePageModule' },
  { path: 'detail/:id', loadChildren: './detail/detail.module#DetailPageModule' },
];

home.ts

nextClicked(){
    this.navCtrl.navigateForward('/detail/' + '11');
  }

detail.ts

ngOnInit() {
    let output= this.activatedroute.snapshot.paramMap.get('id');
    console.log("data recived is ",JSON.stringify(output))
  }

输出：接收到的数据为空

浏览器中的 URL 也正在更改为 http://localhost:8101/contact/11

我希望我的 url 保持默认状态 http://localhost:8101/ 这在 ionic 4 中可行吗？

请帮助并提前致谢！

Answer 1

当您在页面之间路由时，您的 URL 会发生变化。因此，如果您不想更改 URL，那么唯一的方法就是使用标志隐藏和显示组件。然而，从 ionic 4 开始，建议使用 Angular 路由而不是 Ionic Nav 控制器，这个 article 可以让你深入了解它

您正在使用 NavController API 进行导航，但从 angular 路由 ActivatedRoute API 中提取数据。您应该使用 Angular 路由 API 进行导航，如下所示

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  ...
})
export class HomeComponent {

  constructor(private router: Router){}

  navigate(){
   this.router.navigate(['/detail', { id: "123" }]);
  }
}

然后您可以使用 ActivatedRoute API 提取，如下所示

let id = this.route.snapshot.paramMap.get('id')

Answer 2

像这样传递你的变量。

constructor(private router: Router){}

sampleFunction(){
   this.router.navigate(['/detail', {id: "11"}]);
}

然后在要提取的页面中，导入所有这些：

import { NavParams } from '@ionic/angular';
import { Router, ActivatedRoute, Route } from '@angular/router';

假设您想将该数据抓取到一个名为 v1 的变量中。使用 ActivatedRoute:

获取

this.v1 = this.activatedRoute.snapshot.paramMap.get('id');
console.log(this.v1);

并确保导入 NavParams 并将这些行添加到 app.module.ts 文件中的提供商中：

providers: [NavParams]

我想在 ionic 4 页面之间传递数据

I want to pass data between pages ionic 4

routing

angular

ionic4

angular7