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配置history.pushState

在此处输入链接说明

Angular 2.0路由器无法重新加载浏览器