Angular 2 - 无法直接使用URL导航到路由

时间:2016-10-03 19:15:26

标签: angular typescript angularjs-directive

我在angular 2项目中设置了一些路由。这对我来说从来不是一个问题,但我对这个更新版本的角色有困难。

如果我点击路线链接我没有问题。但是,如果我去除我的根(/)以外的任何路线,我的应用程序将被卡在加载屏幕上。每当我尝试通过网址/login时,我都会被卡住..

相关文件

app.routes.ts

import { ModuleWithProviders }  from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component'
import { LoginComponent } from './login/login.component'

import { AuthGuard } from './auth-guard.service'

const appRoutes: Routes = [
  { path: '', component: DashboardComponent},
  { path: 'login', component: LoginComponent },
]

export const appRoutingProviders: any[] = [

];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes)

app.module.ts

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    DashboardComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routing,
    StoreModule.provideStore({user})
  ],
  providers: [
    AuthGuard,
    AuthService,
    appRoutingProviders
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<div id="header">
    <img src="app/assets/img/irs-logo.png" alt="irs">
</div>  
  <nav>
    <a routerLink="/login" routerLinkActive="active">login</a>
    <a routerLink="/" routerLinkActive="active">dashboard</a>
  </nav>

<div id="body" class="container body">
  <router-outlet></router-outlet>
</div>

还有什么我可能会在这里失踪吗?

我的组件在这个阶段几乎是空壳

2 个答案:

答案 0 :(得分:1)

我没有做任何工作。

我按照这里的步骤操作: https://github.com/angular/angular-cli#updating-angular-cli

似乎修复了一切

答案 1 :(得分:-1)

如果您正在使用最终版本,则会是这样的:

[routerLink]="['login']"

(另请注意,没有前导/