2番のrouterLinkがプレーンテキストで表示

Question

2番のrouterLinkで問題が発生しました。 私はVisual Studio 2015でルーティングコンセプトのSPAを作成しようとしています。 [routerLink]でアンカータグをクリックすると、特定のページにリダイレクトされますが、アンカータグはクリックできません。プレーンテキストとして表示されます。

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 { } 

してくださいあなたが私からの詳細を必要としているかどうか、私に知らせてください。前もって感謝します。

<a routerLink="/Supplier" routerLinkActive="active">Supplier</a> 
    <a routerLink="/Customer" routerLinkActive="active">Customer</a> 

<router-outlet></router-outlet> 

EDIT：

Answer 1

はこれを試してみてくださいあなたのrouting.tsファイルでも、実際にこのような行がありますか？

export const routing: ModuleWithProviders = RouterModule.forRoot(ApplicatonRoutes); 

これを@ngModuleにインポートしましたか？プロジェクトを知りませんが、実際にコンテンツを作成していない場合、ページにリンクが表示され、クリックできなくなり、エラーは発生しません。

Answer 2

MasterPage.html

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

Routing.ts

import { Routes, RouterModule } from '@angular/router'; 
import { CustomerComponent } from '../Binder/CustomerComponent'; 
import { SupplierComponent } from '../Binder/SupplierComponent'; 

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

export const routing = RouterModule.forRoot(appRoutes); 

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 { routing } from './Routing'; 

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

そして、あなたのファイルを大文字にしないでください。

Answer 3

プレフィックススラッシュとあなたのリンク：括弧なし

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