Я хочу передавать данные между страницами ionic 4
Я хочу передавать данные между страницами ionic 4 без изменения URL-адреса.
Код:
приложение-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' },
];
дом.тс
nextClicked(){
this.navCtrl.navigateForward('/detail/' + '11');
}
деталь.ts
ngOnInit() {
let output= this.activatedroute.snapshot.paramMap.get('id');
console.info("data recived is ",JSON.stringify(output))
}
Полученные данные Выход: равны нулю
Также URL-адрес в браузере меняется на http://локальный:8101/контакт/11
Я хочу, чтобы мой URL-адрес оставался как по умолчанию http://локальный:8101/, возможно ли это в ionic 4?
пожалуйста, помогите и заранее спасибо!
Поскольку я новичок в ionic 4, если могу поделиться кодом, это будет полезно.
Он не относится к ионным, он является основным из угловых
Вы даже можете использовать тему RxJs, проверьте этот блог coding-karma.com/2018/05/06/…
Ответы 2
Когда вы выполняете маршрут между страницами, ваш URL-адрес должен измениться. поэтому, если вы не хотите менять свой URL-адрес, единственный способ - скрыть и показать компоненты с помощью флагов. Однако из ionic 4 рекомендуется использовать маршрутизацию Angular вместо контроллера Ionic Nav, этот статья может дать вам представление об этом.
Вы используете API NavController для навигации, но извлекаете данные из API угловой маршрутизации ActivatedRoute. вы должны перемещаться с помощью API Angular Routing, как показано ниже.
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')
откуда я могу передать свой параметр «id».
Обновлен ответ, чтобы отразить ваш комментарий this.router.navigate(['/detail', {id: "123" }]);
Передайте свою переменную следующим образом.
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.info(this.v1);
И обязательно импортируйте NavParams и добавьте эти строки в ваши провайдеры в файле app.module.ts:
providers: [NavParams]
Вы должны использовать декоратор @input для передачи данных