Angular 2中的直接加载路线

Question

我有一个导航到两条路线的 Angular 应用程序：

http://localhost:8080/ /* Landing page */
http://localhost:8080/details/:id /* Result page */

每当我导航到 http://localhost:8080/details/4235 时。我遇到了错误：Cannot GET /details/4235

这是我设置路线的方式，在我的：

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LandingPage } from './components/landingpage/landingpage.component';
import { ResultPage } from './components/resultpage/resultpage.component';

import { TitleService } from './services/title.service';

const routes: Routes = [
  { path: '', component: LandingPage },
  {
    path: 'details/:id', component: ResultPage, pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [TitleService]
})
export class AppRoutingModule { }

我导入到我的：

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; // <-- NgModel lives here
import { RouterModule, Routes } from '@angular/router';
import { AppComponent }         from './app.component';
import { LandingPage } from './components/landingpage/landingpage.component';
import { ResultPage } from './components/resultpage/resultpage.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [
    AppComponent,
    LandingPage,
    ResultPage
  ],
  imports: [
    BrowserModule,
    FormsModule, // <-- import the FormsModule before binding with [(ngModel)]
    HttpModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我无法找到一种有效的 Angular 2 处理直接链接到 url 的方法。

如何在 Angular 2 中设置直接链接，这样当我加载 http://localhost:8080/details/4235 时，它会加载我的 ResultPage 组件。

编辑：

加载 http://localhost:8080/#/details/4235 是有效的，但它会重新加载 LandingPage 组件。当有扩展 url 时，我正在尝试加载 ResultPage 组件。

Answer 1

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LandingPage } from 
'./components/landingpage/landingpage.component';
import { ResultPage } from 
'./components/resultpage/resultpage.component';

import { TitleService } from './services/title.service';

const routes: Routes = [
  { path: '', component: LandingPage },
{
path: 'details/:id', component: ResultPage
}
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
providers: [TitleService]
})
export class AppRoutingModule { }

在这里，您首先加载空路径。然后将加载其他路径。更新空路径路由。最后将其保留在层次结构中。

更新代码：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LandingPage } from ' 
./components/landingpage/landingpage.component';
import { ResultPage } from 
'./components/resultpage/resultpage.component';

import { TitleService } from './services/title.service';

const routes: Routes = [
{
path: 'details/:id', component: ResultPage
},
{ path: '', component: LandingPage } //<-- here  
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
providers: [TitleService]
})
export class AppRoutingModule { }

编辑： 也可能存在您的浏览器不支持 HTML5 pushState 的问题。我指的是一些可能会有所帮助的 SO 链接。

Configure history.pushState for Angular 2

enter link description here

Angular 2.0 router not working on reloading the browser