0

I'm trying to build a mailing functionality in my app using angular, the problem is that I want to get parameters from the url to filter the mails. (example : inbox / sent / spam / trash ... etc)

Here are my Routes :

export const AppRoutes: Routes= [
  { path : '' , component : MainComponent },
  { path : 'main/:id', component : MainComponent},
]

Constructor of my MainComponent :

constructor(
      private _mailService : MailService,
      private _authService : AuthService, 
      private dialog: MatDialog,
      private activatedRoute : ActivatedRoute
    ) { 
      console.log("main mailing component ctor");
      this.activatedRoute.params.subscribe((data)=> console.log(data));
    }

The Problem is that console.log(data) is always giving me an empty object.

I've tried it with another component and it's working very fine.

I don't know what I'm doing wrong here.

Here is my folder / component structure :

Dashboard
   /Mailing
      /Main
      /SideBar
      Mailing.module.ts
      Mailing.component.ts
      Mailing.routing.ts
      Mailing.component.scss

Here is the url I'm trying to access : http://localhost:4200/dashboard/main/1234

Mohammed Chanaa
  • 93
  • 2
  • 10
  • Can you provide a live environment to debug this on stackblitz or something. cause i tried locally and it works for me – Tejeshree May 05 '21 at 13:58
  • it is a very big project and I don't think I can provide so much informations about everything but I will try to give only most important informations. – Mohammed Chanaa May 05 '21 at 14:00
  • can you paste code where you try to navigate here? Cause in your first scenario of routes, it directly goes to MainComponent, here path is ''. So no params will be passed – Tejeshree May 05 '21 at 14:06
  • I'm trying to reproduce the same error in stackblitz – Mohammed Chanaa May 05 '21 at 14:11
  • what is route config for dashboard and what is your base href, i am just curious how this flow works as the code snippets don't convey this. Hope you can reproduce it – Tejeshree May 05 '21 at 15:31

1 Answers1

0

from the documentation

Two older properties are still available. They are less capable than their replacements, discouraged, and may be deprecated in a future Angular version. params — An Observable that contains the required and optional parameters specific to the route. Use paramMap instead.

i resolved using paramMap. https://angular.io/api/router/ParamMap

Dario
  • 364
  • 2
  • 9