当我在url中手动添加参数时，Angular Routing无法正常工作

Question

我创建了HeroApp，在this tutorial之后，我在服务中显示了Heros列表。

当用户选择任何Hero时，将显示该特定Hero的详细信息。但是，当我手动将英雄ID附加到url时，我得到一个错误：

  

获取http://localhost:3000/persons/node_modules/core-js/client/shim.min.js
  获得http://localhost:3000/persons/systemjs.config.js
  获得http://localhost:3000/persons/node_modules/zone.js/dist/zone.js
  获得http://localhost:3000/persons/node_modules/reflect-metadata/Reflect.js
  获得http://localhost:3000/persons/node_modules/systemjs/dist/system.src.js
  获得http://localhost:3000/persons/systemjs.config.js
  未捕获的ReferenceError：未定义系统

这是我的代码：

app.personList.ts：

<ul>
    <ul>
    <li *ngFor="let person of people">
        <a [routerLink]="['/persons', person.id]">
            {{person.name}}
        </a>
    </li>
</ul>

app.personList.html

http://localhost:3000/persons/2

当用户点击英雄时，它会显示英雄的详细信息，并且网址会更改为：

import { Component, Input, OnInit, OnDestroy } from "@angular/core"; import { Person } from "../model/peopleModel"; import { PeopleService } from "../services/app.peopleListService"; import { ActivatedRoute, Router } from "@angular/router"; @Component({ selector: 'app-person-details', templateUrl: '/persondetail/app.peopleDetail.html' }) export class PeopleDetail implements OnInit, OnDestroy{ @Input() person : Person; sub: any; constructor(private peopleService: PeopleService, private route: ActivatedRoute, private router: Router){ } ngOnInit(){ this.sub = this.route.params.subscribe(params => { let id = Number.parseInt(params['id']); this.person = this.peopleService.get(id); }); } ngOnDestroy(){ if(!!this.sub){ this.sub.unsubscribe(); } } gotoPeoplesList(){ let link = ['/persons']; this.router.navigate(link); } }

app.personDetail.ts：

<section *ngIf="person">
    <h2>You selected: {{person.name}}</h2>
    <h3>Description</h3>
    <p>
       {{person.name}} weights {{person.weight}} and is {{person.height}} tall.
    </p>
</section>

<button (click)="gotoPeoplesList()">Back to peoples list</button>

app.personDetail.html：

import { PeopleListComponent } from "./peoplelist/app.peopleList";
import { Routes, RouterModule } from '@angular/router';
import { PeopleDetail } from "./persondetail/app.peopleDetail";

const routes: Routes = [
  // map '/persons' to the people list component
  {
    path: 'persons',
    component: PeopleListComponent,
  },
  // map '/' to '/persons' as our default route
  {
    path: 'persons/:id',
    component: PeopleDetail
  },
  {
    path: '',
    redirectTo: '/persons',
    pathMatch: 'full'
  },
];

export const appRouterModule = RouterModule.forRoot(routes);

routing.ts：

factor

Answer 1

index.html之前<base href="/">必须scripts。

Answer 2

在Angular 6中，通过传递诸如bid / 12345（bid /：id）之类的参数时，我遇到了同样的问题。

解决 替换

<base href="/">

与

<base href="./">

保存我的一天。