Angular 2 中直接加载路由

Question

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

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

每当我导航到，例如，http://localhost:8080/details/4235。我遇到错误：无法获取 /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 链接。

Angular 2 中直接加载路由

Direct loading routes in Angular 2

javascript

angular-routing

angular