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>

如果我在網址中手動輸入，那么我確實會導航到上面的路徑。 但是，如果我單擊它們，則沒有任何反應。調試器不會發出任何錯誤警告。

歡迎任何幫助！

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>