角度2：ルート

Question

UPDATED ANSWER

に基づいてナビゲーションバーアイコンの色の変化、元の質問については、以下を参照してください。しかし、私には解決策を導くための@Smitに感謝します。ここで

は溶液で更新Plunkerです：Updated Plunker

は今これを解決する良い方法があるかもしれませんが、これは、私は当分の間持っているかです。

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() {} 
} 

は基本的に私は、ルータのURLを見つけるために、ルータ/ NavigationEndを使用し、そこから私は、クラスを追加/削除するngClassを使用しました。 2017年2月21日

上で編集

私は、ユーザーが特定のページを見ているとき、ナビゲーションバーのアイコンの色を変更しようとしています。

たとえば、ユーザーがホームページを表示している場合、アイコンはグレーでなければなりませんが、ユーザーが赤いページを表示している場合はアイコンが赤色になります。

私は角度2とブートストラップ4を使用しています。これは基本的な設定です。

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およびblue.component.tsは、基本的にhome.component.tsと同じです。

私はplunker作成しました：Plunker

Answer 1

よしを、ビット研究の後、私はURLパスへの変更を検出するために、次のを発見しました。

import { Router } from '@angular/router' 

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

これは、URLパスのすべての変更をサブスクライブします。

コンソールには、次のオブジェクトが表示されます。 uはuはウル特定の拡張子を持つやりたいことができますこの方法では、別の拡張子に

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

をリダイレクトするときに

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

。

PS：ルータ出口があるapp.componentにコンストラクタを配置しました。