angular2 routerLink不是URL

Question

顯示試圖創建一個angular2 SPA：

裏面我主要的模塊，我宣佈的路線，我是要使用的組件： mainApp.ts：

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { RouterModule, Routes } from '@angular/router'; 
import { BaseComponent,IndexComponent, ContactComponent, 
     PortfolioComponent, AboutComponent } from './BaseComponents'; 

const appRoutes: Routes = [ 
    { path: '', component: IndexComponent }, 
    { path: 'about', component: AboutComponent }, 
    { path: 'portfolio', component: PortfolioComponent}, 
    { path: 'contact', component: ContactComponent} 
]; 

@NgModule({ 
    imports:  [ BrowserModule, RouterModule.forRoot(appRoutes)], 
    declarations: [ BaseComponent, IndexComponent, ContactComponent, 
        PortfolioComponent, AboutComponent ], 
    bootstrap: [ BaseComponent ] 
}) 
export class AppModule { } 

所以，很顯然，我自舉BaseComponent 所以BaseComponent.ts裏面我導入如下：

import { Component } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 
import { IndexComponent, AboutComponent, PortfolioComponent, 
     ContactComponent} from '../BaseComponents'; 

，並在模板中：

<a [routerLink]='index'>index</a> 
<a [routerLink]='portfolio'>portfolio</a> 
<a [routerLink]='about'>about</a> 
<a [routerLink]='contact'>contact</a> 

<router-outlet></router-outlet> 

如果我的URL裏面manualy型，那我就定位到上通路。但是，如果我點擊它們，沒有任何反應。調試器不會給出任何錯誤警告。

歡迎任何幫助！

Answer 1

當您使用[routerLink]="index"索引必須是您的組件的屬性。

<a [routerLink]="'index'">index</a> 
<a [routerLink]="'portfolio'">portfolio</a> 
<a [routerLink]="'about'">about</a> 
<a [routerLink]="'contact'">contact</a> 

或

<a routerLink="index">index</a> 
<a routerLink="portfolio">portfolio</a> 
<a routerLink="about">about</a> 
<a routerLink="contact">contact</a> 

或

<a routerLink='index'>index</a> 
<a routerLink='portfolio'>portfolio</a> 
<a routerLink='about'>about</a> 
<a routerLink='contact'>contact</a>