3

Is there a way to get the data params in a component that is outisde of router outlet.

const appRoutes: Routes = [
{ path: '', component: SitesComponent },
{ path: 'pollutants/newpollutant', component: PollutantComponent, data: { new: true, crumbs: ["New pollutant"] } }
];

Component

export class BreadcrumbsComponent implements OnInit {    
list: any[] = [] as any[];

constructor( private router: Router) {

}

ngOnInit() {
    this.router.events.subscribe((val) => {
        if (val instanceof NavigationEnd)
            console.log(val);
    });
}

}

Capturing navigation end as above only gives me url.

americanslon
  • 4,048
  • 4
  • 32
  • 57
  • what is the expectation can you elaborate – Aravind Nov 30 '17 at 20:10
  • @Aravind I want to see the `data` object like you can in the `activateRoute` – americanslon Nov 30 '17 at 20:20
  • I'm trying to do the same thing. My reason is that I want to change some of the elements in the header depending on the route. In my view I have two options: either move the `HeaderComponent` to the `router-outlet` and have to declare it in every submodule or create a service that tells the component outside the router that something has changed. Since there's not much activity on this question I'll go with the first option. – Laszlo Mar 12 '18 at 13:58
  • Check this out: https://stackoverflow.com/a/57447329/5366641 – scopchanov Aug 11 '19 at 04:38

1 Answers1

1

Well, I am not sure if you can do this and in any case it doesn't sound like a good pattern. You can share data (state) through any component with a shared singleton service and observables.

And it doesn't have to be parent-child relationship https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service

I hope that helped. It's basically what you are asking but not from the router service but a 'custom' shared service. Both of them use observables.

DrNio
  • 1,936
  • 1
  • 19
  • 25
  • 1
    This is what how I am doing it now. This is a clunky choice for what I am trying to accomplish because that requires a component inside a router outlet maintain information that is already defined in `const appRoutes` AND use a connecting service just to update the `BreadcrumbsComponent`. Much cleaner would be to have that `BreadcrumbsComponent` access `data` from `const appRoutes` directly. – americanslon Nov 30 '17 at 20:38
  • yes, why don't u have the data as `const` and `export` it ? – DrNio Nov 30 '17 at 22:14
  • Because I don't need to access just any data I need to access the data parameter of the `appRoutes` constant for the active route. Problem is active route isn't available outside the router outlet. – americanslon Nov 30 '17 at 22:23
  • ah i see, it won't make sense to make the url a little bit ugglier and add a query param there or something ? from there i guess u can use `Location` or something else than activated route or router (indeed you won't get it from there) – DrNio Dec 01 '17 at 08:12
  • Not really because I already have a way, I just think it's a little clunky. Your second suggestion also works but it's about as clunky as the solution I have. I was just hoping to learn a better way but it's starting to look like this just isn't something that can be done, which is knowledge all in itself. Thanks. – americanslon Dec 01 '17 at 15:46