这是我目前对html的尝试:
<a [routerLink]="['home']">HOME</a>
这是我的ts文件路径:
import { Route } from '@angular/router';
import { HomeComponent } from './index';
export const HomeRoutes: Route[] = [
{
path: 'home',
pathMatch: 'full',
component: HomeComponent
}
];
我收到错误:
模板解析错误: 无法绑定到“routerLink”&#39;因为它不是“a”的已知属性。 (&#34;
这些是我的包依赖项:
"dependencies": {
"@angular/common": "~2.1.2",
"@angular/compiler": "~2.1.2",
"@angular/core": "~2.1.2",
"@angular/forms": "~2.1.2",
"@angular/http": "~2.1.2",
"@angular/platform-browser": "~2.1.2",
"@angular/platform-browser-dynamic": "~2.1.2",
**"@angular/router": "~3.1.2",**
"angular2-google-map": "^0.1.8",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.8",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.39",
"zone.js": "0.6.25"
}
组件:
import { Component, OnInit } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'Home',
templateUrl: 'home.component.html'
})
export class HomeComponent implements OnInit {
constructor() {}
ngOnInit() {
}
}
模块:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { HomeComponent } from './home.component';
@NgModule({
imports: [CommonModule, RouterModule],
declarations: [HomeComponent],
exports: [HomeComponent],
providers: []
})
export class HomeModule { }
app.router:
import { Routes } from '@angular/router';
import { HomeRoutes } from './home/index';
export const routes: Routes = [
...HomeRoutes
];
应用模块:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { APP_BASE_HREF } from '@angular/common';
import { RouterModule } from '@angular/router';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { routes } from './app.routes';
import { HomeModule } from './home/home.module';
@NgModule({
imports: [BrowserModule, HttpModule, RouterModule.forRoot(routes), HomeModule],
declarations: [AppComponent],
providers: [{
provide: APP_BASE_HREF,
useValue: '<%= APP_BASE %>'
}],
bootstrap: [AppComponent]
})
export class AppModule { }