Angular4 + Die Eigenschaft 'URL' von undefined kann nicht gelesen werden

Question

Die Logik zwischen dem Klicken auf einen Link und dem Ändern der Farbe eines Elements auf dem Bildschirm wird bearbeitet. In diesem Beispiel möchte ich die Farbe des h1-Tags ändern, wenn ich auf einen Link klicke. Hier ist, was ich bisher habe. Die blaue Link navigieren nicht auf die andere Komponente

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

Ich erhalte diese einen Fehler, dass meine Änderungen aus der Anwendung hindert und möglicherweise meine Links von der Einhaltung von der Navigation:

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

Quellen in Inspektoren diesen Code unterstreichen

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

Was ist das Problem mit diese Linie?

Answer 1

Sie müssen den Router für die gesamte Komponente verfügbar machen.

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

zu tun, so können Sie die Variable privat

constructor(private router: Router){} 

jetzt Router kann im gesamten Bauteil mit this.router

---

Randnotiz verwendet werden: Die obigen Lösung ist Abkürzung für

export class AppComponent { 
    private router: Router; 

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