角度2：导航栏图标颜色根据路线变化

Question

UPDATED ANSWER

See below for the original question. But thanks to @Smit for leading me to the solution.

Here is the updated Plunker with the solution: Updated Plunker

Now there may be a better way to solve this, but this is how I have for the time being.

app.component.ts

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

@Component({
  selector: 'my-app',
  template: `
  <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
      <div>
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <a class="nav-link" routerLink="home">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" routerLink="red">Red <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" routerLink="blue">Blue <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link"><i [ngClass]="setClasses()" class="icon-emotsmile icons"></i></a>
          </li>
        </ul>
      </div>
    </nav>
    <div class="container-fluid">
    <h1>Please click on links in navbar.</h1>
    <hr><hr>
    <router-outlet></router-outlet>
    </div>
  `
})
export class AppComponent implements OnInit {

  someProperty = true;
  anotherProperty = true;

  setClasses() {
      let classes =  {
          redText: this.someProperty,    
          blueText: this.anotherProperty, 
      };
      return classes;
  }

  constructor(private router: Router) {
        router.events.subscribe(e => {
          if(e instanceof NavigationEnd) {
            if(this.router.url === '/' || this.router.url === '/home') {
              this.someProperty=false;
              this.anotherProperty=false;
            console.log("I am home")
          }
          else if(this.router.url === '/red') {
            this.someProperty=true;
            this.anotherProperty=false;
            console.log("I am red")
          }
          else if(this.router.url === '/blue') {
            this.someProperty=false;
            this.anotherProperty=true;
            console.log("I am blue")
          }
          else {
            console.log("wrong")
          }
          }
        });
      }
  ngOnit() {}
}

Basically I used Router/NavigationEnd to find the router url and from there I used ngClass to add/remove classes.

EDITED on 02/21/2017

I'm trying to change the color of the navbar icons when the user is viewing certain pages.

For example, if the user is viewing the home page, the icons should be grey, but when the user if viewing the red page the icons will be red.

I am using Angular 2 and Bootstrap 4. Here is the basic setup.

app.component.ts

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

@Component({
  selector: 'my-app',
  template: `
  <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
      <div>
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <a class="nav-link" routerLink="home">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" routerLink="red">Red <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" routerLink="blue">Blue <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link"><i class="icon-emotsmile icons"></i></a>
          </li>
        </ul>
      </div>
    </nav>
    <div class="container-fluid">
    <h1>Please click on links in navbar.</h1>
    <hr><hr>
    <router-outlet></router-outlet>
    </div>
  `
})
export class AppComponent implements OnInit {
  constructor() {}
  ngOnit() {}
}

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { RedComponent }   from './red.component';
import { BlueComponent }   from './blue.component';
import { HomeComponent }   from './home.component';

const routes: Routes = [
  { path: 'red', component: RedComponent },
  { path: 'blue', component: BlueComponent },
  { path: 'home', component: HomeComponent },
  { path: '**', redirectTo: '/'}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: []
})
export class AppRoutingModule { }

home.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-home',
  template: `
    <h2>HOME</h2>

    <p>I want the navbar to be <b>grey</b> and the smile icon to be <b>grey</b>.</p>
  `
})
export class HomeComponent {}

red.component.ts and blue.component.ts are basically the same as home.component.ts .

I have created a plunker: Plunker

Answer 1

Alright, after a bit research i found the following to detect changes to the url path.

import { Router } from '@angular/router'

    constructor(private router: Router) {
        router.events.subscribe((val) => console.log(val));
      }

This is subscribe all the changes on the url path.

And in the console you can see the following object.

NavigationEnd {id: 1, url: "/newExt", urlAfterRedirects: "/newExt"}

upon redirecting to different extension

NavigationEnd {id: 2, url: "/", urlAfterRedirects: "/"}

This way u can do what u want with ur specific extensions.

PS: I placed the constructor in the app.component where the router-outlet lies.