在角度2中,如何使用routerlink进行html路由

时间:2016-10-29 16:21:11

标签: angular angular2-routing

这是我目前对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 { }

0 个答案:

没有答案