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

如果您需要我提供更多详细信息，请与我们联系。提前谢谢。

Answer 1

试试这个：

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

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

@ngModule

已将其导入<div class="caption"> <h4><a style="width:140%;" href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a></h4> <a href="javascript:toggleDiv('myContent');" style="padding: 5px 10px;">Show/Hide</a> <div id="myContent" style="display:none;"> <p class="description"><b>About:</b> <?php echo $product['description']; ?></p> <?php if ($product['manufacturer']) { ?> <b><?php echo "<strong>Manufacturer:</strong>" ?></b> <a href="<?php echo $product['manufacturers']?>"><span itemprop="brand"><?php echo $product['manufacturer']; ?></span></a> <?php } ?></br> <?php echo "<strong>For models:</strong>  " . $product['model']; ?></br> <?php echo "<strong>Manufacturer code:</strong>  " . $product['mpn']; ?></br> </div> </div>，对吧？不了解您的项目，如果您刚刚启动它，并且没有“真实内容”意味着这将显示您页面上的链接，并且它们不可点击，并且不会产生错误。

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>

angularLink in angular 2显示为纯文本

3 个答案: