リンクをクリックして画面上の要素の色を変更するまでのロジックに取り組んでいます。この例では、リンクをクリックするときにh1タグの色を変更したいと考えています。ここに私がこれまで持っているものがあります。青色のリンクはAngular4 +未定義のプロパティ 'url'を読み取ることができません
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>
を強調しますその行?
app.component.tsに経路変数がありません。router.urlを意味しましたか?またコンストラクタ(router:Router){}は、コンストラクタでルータを利用できるようにします。コンポーネント全体で使用できるようにする場合は、コンストラクタ(プライベートルータ:Router){} – LLai
OMGを使用します。ありがとうございました。それはそれを修正したものです!コンポーネント全体で使用できるようにする必要があります。 – bluebrooklynbrim