angular - ionic retreive passed data from page to page
问题描述
i am navigating from page to another page in ionic 5 and passing data as navigation parameters , it's already navigating correctly but i can't retreive the passed data in the details page . HomePage.ts :
this.navCtrl.navigateRoot(['products', {item: 'data value'}]);
Products.ts (details page):
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-products',
templateUrl: './products.page.html',
styleUrls: ['./products.page.scss'],
})
export class ProductsPage implements OnInit {
private activatedRoute: ActivatedRoute
constructor() {
this.sub = this.route.params.subscribe(params => {
this.id = params.id;
});
}
ngOnInit() {
/* this.activatedRoute.params.subscribe((params) => {
console.log('Params: ', params);
});
*/
}
}
i got this error : "Property 'sub' does not exist on type 'ProductsPage'.",
解决方案
There are 2 options:
Option 1: NavController:
// Send Parameter
import { NavController } from '@ionic/angular';
import { NavigationExtras } from '@angular/router';
//...
constructor(public navCtrl: NavController) { }
//...
let navigationExtras: NavigationExtras = {
queryParams: {
currency: JSON.stringify(currency),
refresh: refresh
}
};
this.navCtrl.navigateForward(['page-slug'], true, navigationExtras);
-
// Receive Parameter
import { ActivatedRoute } from "@angular/router";
//...
constructor(private route: ActivatedRoute) {}
//...
this.route.queryParams.subscribe(params => {
this.refresh = params["refresh"];
this.currency = JSON.parse(params["currency"]);
});
Option 2: Router:
// Send Parameter
import { Router } from '@angular/router';
//...
constructor(private router: Router) {}
goToProductDetails(id) {
this.router.navigate(['/product-details', id]);
}
-
// Receive Parameter
import { ActivatedRoute } from '@angular/router';
//...
id: any;
constructor(private route: ActivatedRoute) {}
//...
this.sub = this.route.params.subscribe(params => {
this.id = params['id'];
});
推荐阅读
- javascript - 将 HTML 格式转换为 Mobile Legends 的 BBCode 格式
- python - dict里面的递归列表?- Python
- javascript - Webpack 插件:查找属于 CallExpression 的文件
- python - Python Django - 内部错误 ProgrammingError 关系不存在
- javascript - 除非页面刷新,否则 React 路由器会更改 url 但不会查看
- flutter - 可以直接用 Flutter 内置的 Canvas 绘制方法来渲染变宽笔画吗?
- python - 如何设置正确的循环
- django - ModuleNotFoundError:没有名为“survey_responses”的模块
- python - Plotly python histogram 将自定义颜色添加到不同的值
- typescript - “Vue”类型上不存在属性“x”