Question

更新的答案

请参阅下面的原始问题。但感谢@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() {}
}

基本上我使用Router / NavigationEnd来查找路由器URL，并从那里使用ngClass来添加/删除类。

于02/21/2017编辑

我试图在用户查看某些页面时更改导航栏图标的颜色。

例如，如果用户正在查看主页，则图标应为灰色，但当用户查看红色页面时，图标将为红色。

我正在使用Angular 2和Bootstrap 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() {}
}

应用-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

好吧，经过一番研究后，我发现以下内容可以检测网址路径的变化。

import { Router } from '@angular/router'

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

这是订阅网址路径上的所有更改。

在控制台中，您可以看到以下对象。

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

重定向到不同的扩展名

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

这样你就可以通过特定的扩展来做你想做的事。

PS：我把构造函数放在路由器出口所在的app.component中。

角度2：基于路线

1 个答案: