angular - Angular 2 中的 routerLink 显示为纯文本

Question

我一直面临 Angular 2 中 routerLink 的问题。 我正在使用 Visual Studio 2015，试图创建一个具有路由概念的 SPA。 单击带有 [routerLink] 的 anchor 标记时，它应该将我重定向到特定页面，但 anchor 标记不可点击 - 它显示为纯文本。

MasterPage.html-

Left menu headers footers
<a [routerLink]="['Supplier']">Supplier</a> 
<a [routerLink]="['Customer']">Customer</a><br />
<div>
    <router-outlet></router-outlet>
</div>

Routing.ts -

import {Component} from '@angular/core';
import {CustomerComponent} from '../Binder/CustomerComponent';
import {SupplierComponent} from "../Binder/SupplierComponent";

export const ApplicationRoutes = [
{ path: 'Customer', component: CustomerComponent },
{ path: 'Supplier', component: SupplierComponent }
];

app.module-

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CustomerComponent }   from './CustomerComponent';
import {FormsModule} from "@angular/forms"
import {GridComponent} from "./GridComponent"
import { MasterPageComponent }   from './MasterPageComponent';
import { SupplierComponent }   from './SupplierComponent';
import { RouterModule } from '@angular/router';
import { ApplicationRoutes } from './Routing';

@NgModule({
imports: [
RouterModule.forRoot(ApplicationRoutes),
BrowserModule,
FormsModule],
declarations: [
CustomerComponent,
SupplierComponent,                  
MasterPageComponent],
bootstrap: [MasterPageComponent]
})
export class MainModuleLibrary { }

如果您需要我提供更多详细信息，请告诉我。提前致谢。

Answer 1

用斜杠作为链接的前缀:

<a [routerLink]="['/Supplier']">Supplier</a> 
<a [routerLink]="['/Customer']">Customer</a><br />
<div>
    <router-outlet></router-outlet>
</div>