I have a page that I use to show 3 differents html depending on where it is called.
In a page I have:
openCreateAnagraphics(){
this.router.navigate(["/anagraphics", {customerUpdate: true}]);
}
So I'm navigate to anagraphics.
there I have in my anagraphics.page.ts:
ngOnInit() {
this.handleParams();
}
handleParams() {
let params = this.route.snapshot.params;
console.log("this.route.snapshot", this.route.snapshot)
console.log("params", params)
this.customerUpdate = params.customerUpdate ? params.customerUpdate : false
console.log("this.customerUpdate ", this.customerUpdate)
}
and in the anagraphics.page.html
<div *ngIf="....">
<div>
//this is showed if I come from another way
</div>
</div>
<div *ngIf="customerUpdate">
<div>
HELLO // there is the problem
</div>
</div>
but I see only a white page and my url is
http://localhost:4200/anagraphics;customerUpdate=true
I would to obtain that I if i click on the button that calls openCreateAnagraphics, I'll go in a page that show the html when customerUpdate = true.
EDIT 1:
In my app-routing.module.ts
{ path: 'anagraphics', loadChildren: () => import('./anagraphics/anagraphics.module').then(m => m.AnagraphicPageModule), canActivate: [AuthGuard], data: { configurator: true, customerUpdate: false } },
but in this way customerUpdate is always on false.
My solution reference link: https://angular.io/api/router/RouterEvent
In your .routing.module.ts file add data like the below.
const routes: Routes = [{
path: '',
component: AlertsComponent,
data: {
// What data you want to pass add that here
}
}]
Then get that value in your common component like below. (Like: app or nav component)
constructor(public router: Router) {
router.events.pipe(
filter((e: Event): e is RouterEvent => e instanceof RouterEvent)
).subscribe((e: RouterEvent) => {
// Get your route data here
});
}