javascript - Angular 2 路由 : prevent URL from changing

Question

我是 Angular 2 的新手。我有一个组件和一个路由模块。基本上，我正在尝试遵循 Angular routing tutorial ).它几乎可以工作(好吧，内容按预期显示)。问题是，一旦我使用 URL(例如，为简单起见，手动输入 http://localhost:4200/items/1)，它会将 URL 重写为 http://localhost:4200在我可以说“Jack Robinson”之前，页面本身已正确显示。我更喜欢“正常”行为(即没有 URL 更改，浏览器的后退按钮将我带到上一页等)。

我错过了什么？

我的问题组件:

import { Component } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';

import 'rxjs/add/operator/switchMap';

import { ItemService } from './item.service';
import { Item } from './item';


@Component({
  selector: 'item-details',
  templateUrl: './item-detail.component.html',
})
export class ItemDetails  {
  item : Item;
  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private service: ItemService,
  ) {}

  ngOnInit() : void {
    this.route.params
    .switchMap((params : Params ) => this.service.getItem(+params['id']))
    .subscribe((item : Item) => this.item = item);
  }
}

“items”的路由模块:

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { ItemsComponent }    from './items.component';
import { ItemDetails }    from './item-detail.component';

const itemRoutes: Routes = [
  { path: 'items', component: ItemsComponent },
  { path: 'items/:id', component: ItemDetails },
];

@NgModule({
  imports: [RouterModule.forChild(itemRoutes)],
  exports: [RouterModule]
})
export class ItemsRoutingModule{}

顶层路由模块:

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { Http404 } from './Http-404';

const routes: Routes = [
  { path: '', redirectTo: 'items', pathMatch: 'full'},
  { path: '**', component: Http404 },

];

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

来自控制台的错误消息(可能无关紧要，因为 Item 的实例已正确呈现):

ng:///ItemsModule/ItemDetails.ngfactory.js:24 ERROR TypeError: Cannot read property 'descr' of undefined
    at Object.eval [as updateRenderer] (ng:///ItemsModule/ItemDetails.ngfactory.js:100)
    at Object.debugUpdateRenderer [as updateRenderer] (vendor.bundle.js:13619)
    at checkAndUpdateView (vendor.bundle.js:12924)
    at callViewAction (vendor.bundle.js:13282)
    at execComponentViewsAction (vendor.bundle.js:13214)
    at checkAndUpdateView (vendor.bundle.js:12925)
    at callViewAction (vendor.bundle.js:13282)
    at execEmbeddedViewsAction (vendor.bundle.js:13240)
    at checkAndUpdateView (vendor.bundle.js:12920)
    at callViewAction (vendor.bundle.js:13282)

我希望这是与问题相关的所有代码。如果没有，请告诉我。提前致谢。

编辑:

事实证明，错误消息与问题相关。通过用静态虚拟人替换我的模板，我使一切正常。而且我更加困惑。

Answer 1

好的，解决了。

主要经验教训:如果有任何其他东西在您的 Angular 2 应用程序中抛出异常，即使是暂时的，它也会不可挽回地破坏路由部分。

该问题与路由本身无关。罪魁祸首是在组件模板中使用异步获取(通过 REST API)对象，而不检查对象是否存在。由于对象不是立即从外部 REST 服务中检索到的，因此会多次发出有关 undefined object 的错误消息，直到获得对象并成功呈现组件。但这足以破坏路由!

因此，解决方案是在组件模板中为对象添加一个 **ngIf 条件:

<table  *ngIf="item">
  <tr>
    <td>
      Item description
    </td>
    <td>
      {{item.descr}}
    </td>
...

错误消息消失后​​，路由也按预期运行。

@MichaelPalmer，感谢您为我指明正确的方向!