Angular4无法读取未定义的属性'url'

处理点击链接和更改屏幕上元素颜色之间的逻辑 . 在此示例中，我想在单击链接时更改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 {}

我一直收到这样一个错误，这个错误阻止我的更改被应用，并且可能阻止我的链接导航：

ERROR TypeError：无法在checkAndUpdateView（core.es5）的Object.debugUpdateDirectives [as updateDirectives]（core.es5.js：13058）的Object.eval [as updateDirectives]（AppComponent.html：1）中读取未定义的属性'url' .js：12238）在callViewAction（core.es5.js：12603）的execComponentViewsAction（core.es5.js：12535），在checkAndUpdateView（core.es5.js：12244），在callWithDebugContext（core.es5.js：13458）at ViewRef_.webpackJsonp中的Object.debugCheckAndUpdateView [as checkAndUpdateView]（core.es5.js：12998）... / .. / .. / core/@angular/core.es5.js.ViewRef_.detectChanges（core.es5.js） ：10169）at core.es5.js：4807

Inspector中的来源强调了此代码

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

这条线有什么问题？