[英]Angular Ionic 4 How to pass a Variable from page.html to page.ts
I try to receive a Variable in my 'detail.page.ts' from my 'list.page.html'我尝试从我的“list.page.html”中接收“detail.page.ts”中的变量
In 'list.page.html' I have a list:在“list.page.html”中,我有一个列表:
<ion-list>
<ion-item *ngFor="let item of items" href="details?Reihe={{item.ThemaNr}}">
<ion-icon name="albums" slot="start" [style.color] ="item.Farbe"></ion-icon>
{{item.Name}}
<ion-icon name="list" slot="end"></ion-icon>
</ion-item>
</ion-list>
In my 'detail.page.ts' I want to fetch my JSON-Data like this:在我的“detail.page.ts”中,我想像这样获取我的 JSON-Data:
loadData() {
let data:Observable<any>;
data = this.http.get('https://myURL/mydata.json.php?Reihe= ( and here should be something like: --get."Reihe".from.my.html-page-- to get my ID) ');
data.subscribe(result => {
this.details = result;
})
}
(Hint: Would be even better if there is a "if(isset($_GET['Reihe']))" before (like in PHP)) (提示:如果之前有一个“if(isset($_GET['Reihe']))”会更好(就像在 PHP 中一样))
How could I manage/implement this ??我怎么能管理/实施这个? Sorry, I'm new in Ionic for 4 days.
抱歉,我刚接触 Ionic 4 天。 Big thanx for any ideas!
非常感谢任何想法!
Regards, Estebu问候, 埃斯特布
Ionic:离子:
Ionic CLI : 5.4.15 (C:\\Users\\User1\\AppData\\Roaming\\npm\\node_modules\\ionic) Ionic Framework : @ionic/angular 4.11.8 @angular-devkit/build-angular : 0.801.3 @angular-devkit/schematics : 8.1.3 @angular/cli : 8.1.3 @ionic/angular-toolkit : 2.1.2离子 CLI:5.4.15 (C:\\Users\\User1\\AppData\\Roaming\\npm\\node_modules\\ionic) 离子框架:@ionic/angular 4.11.8 @angular-devkit/build-angular:0.801.3 @angular-devkit /原理图:8.1.3 @angular/cli:8.1.3 @ionic/angular-toolkit:2.1.2
Utility:公用事业:
cordova-res : 0.8.1 native-run : 0.3.0科尔多瓦-res:0.8.1 本机运行:0.3.0
System:系统:
NodeJS : v13.5.0 (C:\\Program Files\\nodejs\\node.exe) npm : 6.13.4 OS : Windows 10 NodeJS:v13.5.0 (C:\\Program Files\\nodejs\\node.exe) npm:6.13.4 操作系统:Windows 10
Ionic 4 uses Angular's router. Ionic 4 使用 Angular 的路由器。 You can add a parameter to your details page:
您可以向详细信息页面添加参数:
{ path: 'details/:reihe', ... }
Access the parameter using ActivatedRoute
:使用
ActivatedRoute
访问参数:
constructor (
private route: ActivatedRoute
) {
let reihe = this.route.snapshot.paramMap.get('reihe');
}
Pass the parameter using routerLink
:使用
routerLink
传递参数:
<ion-item ... [routerLink]="['/details', item.ThemaNr]">
See the Angular documentation for more info.有关更多信息,请参阅Angular 文档。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.