In Angular 6 how do I access route values in app.component.ts

Question

I'm new to angular 6. I have been using angularjs for years though. I trying to work out routing and structuring the application. I want to be able to access a route value in app.compnent. I have the template of my site here and based on a route parameter i need to be able to change the theme. I have a route parameter called modulePath that will always be present in all routes. As app.component contains the router outlet though it seems its not able to access the route values. Any help on this would be appreciated. Perhaps I'm going about it the wrong way entirely.

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router, NavigationStart, NavigationEnd} from 

'@angular/router';
import { Location } from '@angular/common';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Ang';
  modulePath: string;
  private sub: any;

  constructor(
    private route: ActivatedRoute,
    router: Router,
    private location: Location
  ) {

  }

  ngOnInit(): void {
    this.sub = this.route.params.subscribe(params => {
      this.modulePath = params['modulePath'];
      console.log(params);
    });
  }
}

score 0 · Answer 1 · answered Nov 08 '18 at 22:59

For my particular problem I have found a solution. I was unaware that you could have a router-outlet inside a component that was already being shown by another router-outlet. For me I now have a parent route that has the module name and set the theme of the site.

Here is a link to another post. The answer given here shows how to do routes in routes. Angular 2, RC5 router-outlet inside another router-outlet

In Angular 6 how do I access route values in app.component.ts

1 Answers1