Angular2で発生するエラー「Can't bind to 'routerLink' since it isn't a known native property」の解決方法
Angular2で発生するエラー「Can't bind to 'routerLink' since it isn't a known native property」解説
Error: Can't bind to 'routerLink' since it isn't a known native property
このエラーは、routerLink ディレクティブが正しく認識されていないために発生します。原因としては、以下の2点が考えられます。
RouterModule のインポート漏れ
routerLink ディレクティブを使用するには、RouterModule をモジュールにインポートする必要があります。以下のコードのように、@NgModule デコレータの imports プロパティに RouterModule を追加してください。
@NgModule({
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot([
{ path: '', component: AppComponent },
{ path: 'about', component: AboutComponent },
])
],
declarations: [
AppComponent,
AboutComponent
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
routerLink ディレクティブは、要素に属性として追加する必要があります。属性の値には、ルーティングしたいコンポーネントのパスを指定します。以下の例のように、routerLink 属性を <a> タグに追加してください。
<a routerLink="/about">About</a>
上記の2つの原因を解決してもエラーが解決しない場合は、以下の点を確認してください。
- 使用している Angular バージョンと Router バージョンが互換性があるか確認してください。
- コンポーネント名やパス名のスペルに誤りがないか確認してください。
- ブラウザの開発者ツールを使用して、エラーの詳細を確認してください。
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { AboutComponent } from './about/about.component';
@NgModule({
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot([
{ path: '', component: AppComponent },
{ path: 'about', component: AboutComponent },
])
],
declarations: [
AppComponent,
AboutComponent
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
app.component.html
<h1>Angular 2 Routing Example</h1>
<a routerLink="/about">About</a>
<router-outlet></router-outlet>
<h1>About</h1>
<p>This is the about page.</p>
このコードを実行すると、ブラウザに localhost:4200 と入力すると AppComponent が表示され、About リンクをクリックすると AboutComponent が表示されます。
routerLink ディレクティブは、さまざまな方法で使用することができます。詳細については、Angular ドキュメントの RouterLink ディレクティブのページを参照してください。
routerLink ディレクティブを使用せずに異なるコンポーネント間をナビゲートする方法
Router サービスを使用して、プログラム的にコンポーネント間を遷移することができます。Router サービスには、navigateByUrl() や navigateTo() などのメソッドが用意されています。
import { Router } from '@angular/router';
constructor(private router: Router) {}
navigateToAbout() {
this.router.navigateByUrl('/about');
}
アンカータグを使用する
アンカータグの href 属性にパスを指定することで、異なるコンポーネントに遷移することができます。
<a href="/about">About</a>
location オブジェクトを使用して、ブラウザの URL を直接変更することで、異なるコンポーネントに遷移することができます。
import { Location } from '@angular/common';
constructor(private location: Location) {}
navigateToAbout() {
this.location.go('/about');
}
- シンプルなナビゲーションの場合は、
routerLinkディレクティブを使用するのが最も簡単です。 - プログラム的にコンポーネント間を遷移する必要がある場合は、
Routerサービスを使用する必要があります。 - アンカータグや
locationオブジェクトを使用する方法は、より高度なナビゲーションが必要な場合に役立ちます。
angular
