角度 2 中的 routerLink 显示为纯文本

Question

我在 Angular 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>

路由.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>

Answer 2

试试这个：

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

<router-outlet></router-outlet>

编辑：您的routing.ts文件中确实也有与此类似的行？

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

并将其导入您的

@ngModule

，对吧？不了解您的项目，如果您刚刚开始它，并且没有“真实内容”，则意味着这将在您的页面上显示链接，并且它们不可点击，并且不会产生错误。

Answer 3

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 4

就我而言，这是模块中缺少

RouterModule

的导入，我在其中使用了

routerLink

指令。

import { RouterModule } from '@angular/router';

@NgModule({
  declarations: [
    //...
  ],
  imports: [
    //...
    RouterModule,
  ],
  exports: [
    //...
  ]
})