angular routerLink redirects to component as expected, but later router.url not returning current UR-CodePudding

I have a link in my navbar About when I click on it from my homepage (/), browser redirects to /about route(About component) in my application(without reloading the page/tab) which is what I am looking for.

In the component About I have a requirement where I need to load the content dynamically depending on the Url that I am on. I tried many ways of getting the current Url but it always returns "/" or does not return anything at all. What I have and what I believe should work without any problem follows below:

Link on the navbar

<a [routerLink]="['/about/who-i-am']" >
                <div >
                  <i ></i>
                </div>
                <div >
                  <h6 >Who I am</h6>
                  <p >Small 2 line text goes in here about yourself and your blog/articles.</p>
                </div>
              </a>

About Component ts file:

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

@Component({
  selector: 'app-navbar-hero-content-section',
  templateUrl: './navbar-hero-content-section.component.html',
  styleUrls: ['./navbar-hero-content-section.component.css']
})
export class NavbarHeroContentSectionComponent implements OnInit {

  isWhoIam : Boolean = false;
  isHome : Boolean = false;
  constructor(private router: Router) { }

  ngOnInit(): void {

    var currentUrl: string;

    // Current Path:  company 
    // this.route.url.subscribe(url => {
    //   currentUrl = url[0].path;
    // });


    currentUrl = this.router.url;//the problem is here with currentUrl always returning "/" or the URL I came to this component/page from.

    console.log("current URL : "   currentUrl); 



    switch(currentUrl)
    {
      case "/" : 
      case "/home" :
      {
        this.isHome = true;
      }

      case "/about/who-i-am" : {
        this.isWhoIam = true;
      }
    }

  }

}

Any idea what could be happening here, I tried different ways to get the currentUrl with using Location/document and even window, all of them seem to be returning the same /

UPDATE:

Now I realized that the code in the ngOnInit() does not even execute/run when I click the link. I added a Date.now() to the console.log and when I click back and forth between the '/about/who-i-am' and '/' I see that the console log displays the same timestamp in the browser, it does not even change.

CodePudding user response：

You can use window to get URL something like that

let currentUrl = new URL(window.location.href);

console.log('current URL :', currentUrl);

Have a good code!

CodePudding user response：

One way to achieve this would be by using

this.location.path()

or in your case something like

this.location.path().inlcudes('home')

Location has to be imported

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

and added to the constructor

private location: Location,

Update - try adding this to ngOnInit:

 this.router.events.subscribe((evt) => {
      if (evt instanceof NavigationEnd) {
       // evt.url should update when the url gets updated
       // and you can use it whereever needed
      }
    });