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

我希望我的网址保持默认值http://localhost:8101/，在ionic 4中可以吗？

请先谢谢您的帮助！

Answer 1

当您在页面之间路由时，您的URL将会改变。因此，如果您不想更改URL，那么唯一的方法就是使用标志隐藏和显示组件。但是从离子4开始，建议使用Angular路由而不是Ionic Nav控制器，此article可以为您提供有关它的见解

您正在使用NavController API进行导航，但要从角度路由ActivatedRoute API中提取数据。您应该使用Angular Routing 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页面之间传递数据

2 个答案: