Angular4 +未定義のプロパティ 'url'を読み取ることができません

Question

リンクをクリックして画面上の要素の色を変更するまでのロジックに取り組んでいます。この例では、リンクをクリックするときにh1タグの色を変更したいと考えています。ここに私がこれまで持っているものがあります。青色のリンクは

app.module.ts

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { RouterModule, Routes } from '@angular/router'; 

import { AppComponent } from './app.component'; 
import { BlueComponent } from './blue/blue.component'; 
import { AppRoutingModule } from './app-routing.module'; 

import { routes } from './app-routing.module'; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    BlueComponent 
    ], 
    imports: [ 
    BrowserModule, 
    AppRoutingModule, 
    RouterModule.forRoot(routes) 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

app.component.ts

import { Component } from '@angular/core'; 
import { Router, ActivatedRoute, RouterOutlet, Routes } from '@angular/router'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { NgClass, CommonModule } from '@angular/common'; 

@Component({ 
    selector: 'app-root', 
    styleUrls: ['./app.component.css'], 
    template: `<h1 [ngClass]="{'red': (router.url === '/'), 
    'blue': (router.url === '/blue')}">Color Changer</h1> 
     <a routerLink='/'>Red</a> 
     <a routerLink='/blue'>Blue</a> 
     <router-outlet></router-outlet> 
     ` 
}) 
export class AppComponent { 
    constructor(router: Router) {} 
} 

app.component.css他のコンポーネントに移動しない

.red { 
    color: red; 
} 
.blue { 
    color: blue; 
} 

app-routing.module.ts

import { NgModule } from '@angular/core'; 
import { RouterModule, Routes } from '@angular/router'; 

import { AppComponent } from './app.component'; 
import { BlueComponent } from './blue/blue.component'; 

export const routes: Routes = [ 
    { path: '', component: AppComponent }, 
    { path: 'blue', component: BlueComponent }, 
]; 

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

export class AppRoutingModule {} 

私は移動するから、私のリンクを維持するから、おそらく適用からの私の変化を防止することだ。この1つのエラーを取得し、続ける：インスペクタで

ERROR TypeError: Cannot read property 'url' of undefined at Object.eval [as updateDirectives] (AppComponent.html:1) at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13058) at checkAndUpdateView (core.es5.js:12238) at callViewAction (core.es5.js:12603) at execComponentViewsAction (core.es5.js:12535) at checkAndUpdateView (core.es5.js:12244) at callWithDebugContext (core.es5.js:13458) at Object.debugCheckAndUpdateView [as checkAndUpdateView] (core.es5.js:12998) at ViewRef_.webpackJsonp.../../../core/@angular/core.es5.js.ViewRef_.detectChanges (core.es5.js:10169) at core.es5.js:4807

ソースが持つ問題は何このコード

<h1 [ngClass]="{'red': (route.url === '/'), 
    'blue': (route.url === '/blue')}">Color Changer</h1> 

を強調しますその行？

Answer 1

ルータをコンポーネント全体で使用できるようにする必要があります。

constructor(router: Router){ 
    // router is only available here 
} 

そのためには、

constructor(private router: Router){} 

変数をプライベートにすることができ、今ルータがthis.router

---

サイドノートとコンポーネント全体で使用することができます。上記ソリューションは、簡略表記です

export class AppComponent { 
    private router: Router; 

    constructor(router: Router) { 
     this.router = router; 
    } 
}