Angular 4从子OnInit检测路线？

Question

I'm building a website using the Angular 4 framework, and there's lots of different components all interacting with each other. One component, which is visible on every page, is the navbar component. Each item on the navbar represents an angular module with child components.

My goal is to have the item on the navbar highlighted that corresponds to the module you're currently in. Is there a way to do some sort of OnInit in an Angular module so that when a component in that module becomes the router-outlet, the module itself can tell the navbar which item to highlight? Or is there a potentially better way to do this?

My thoughts are that I'd like to avoid every component in a module making that call in their OnInit methods, if instead I could write that same code just once in the parent module.

Answer 1

I don't think this is the best way to do it, but I've used this method before and it works for me. In your navbar component, inject the router so you can detect what the current URL is.

 constructor(private router: Router){}

Then in your navbar component HTML you can use the ngClass to have the navbar components based off the router state.

  <a routerLink="/notifications" routerLinkActive="active"><span
                    class=" glyphicon glyphicon-time"
                    [ngClass]="{'active-route': router.url === '/notifications'}"></span></a>

And then in your CSS add the rule to change the style of active route:

.active-route { color:red // or whatever}