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>

如果我在网址内键入manualy，那么我会导航到上面的路径。但是，如果我点击它们，没有反应..调试器没有给出任何错误警告。

欢迎任何帮助！

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>

angular2 routerLink不在url上显示

1 个答案: