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

【问题标题】：Angular4 + Cannot read property 'url' of undefinedAngular4 +无法读取未定义的属性'url'
【发布时间】：2018-01-16 13:50:12
【问题描述】：

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

我不断收到这个错误，它阻止我的更改应用，并且可能阻止我的链接导航：

错误类型错误：无法读取未定义的属性“url” 在 Object.eval [as updateDirectives] (AppComponent.html:1) 在 Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13058) 在 checkAndUpdateView (core.es5.js:12238) 在 callViewAction (core.es5.js:12603) 在 execComponentViewsAction (core.es5.js:12535) 在 checkAndUpdateView (core.es5.js:12244) 在 callWithDebugContext (core.es5.js:13458) 在 Object.debugCheckAndUpdateView [as checkAndUpdateView] (core.es5.js:12998) 在 ViewRef_.webpackJsonp.../../../core/@angular/core.es5.js.ViewRef_.detectChanges (core.es5.js:10169) 在 core.es5.js:4807

Inspector 中的来源在此代码下划线

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

那条线有什么问题？

【问题讨论】：

您的 app.component.ts 中没有路由变量，您的意思是 router.url 吗？也构造函数（路由器：路由器）{} 只使路由器在构造函数中可用。如果您想让它对整个组件可用，请使用构造函数（私有路由器：路由器）{}
天啊。谢谢。就是这样解决的！需要使其可用于整个组件。

标签： javascript css angular

【解决方案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;
    }
}

【讨论】：