Angular 在url中手动添加参数时角度路由不起作用

我已经创建了HeroApp，在其中显示服务中的Hero列表，如下所示

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

获取
获取
获取
获取
获取
获取
未捕获引用错误：未定义系统

这是我的密码：

app.personList.ts:

import { Component } from '@angular/core';
import { Person } from "../model/peopleModel";
import { PeopleService } from "../services/app.peopleListService";

@Component({
  selector: 'app-people-list',
  templateUrl: './peoplelist/app.peopleList.html'
})
export class PeopleListComponent {
  people: Person[] = [];
  selectedPerson: Person;

  constructor(peopleService : PeopleService){
    this.people = peopleService.getAll();
  }

  personSelect(person : Person)
  {
    this.selectedPerson = person;
  }
}

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);
  }
}

<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>

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);

app.personList.html

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

app.personDetail.html:

import { Component } from '@angular/core';
import { Person } from "../model/peopleModel";
import { PeopleService } from "../services/app.peopleListService";

@Component({
  selector: 'app-people-list',
  templateUrl: './peoplelist/app.peopleList.html'
})
export class PeopleListComponent {
  people: Person[] = [];
  selectedPerson: Person;

  constructor(peopleService : PeopleService){
    this.people = peopleService.getAll();
  }

  personSelect(person : Person)
  {
    this.selectedPerson = person;
  }
}

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);
  }
}

<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>

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);

---

在

脚本之前
index.html
必须有
在
脚本之前
index.html
必须有
在
脚本之前
我在Angular 6中遇到了同样的问题，当传递像bid/12345（bid/：id）这样的参数时

解决问题
替换



与



保存我的一天。
我在Angular 6中遇到了同样的问题，当传递参数bid/12345（bid/：id）时

解决问题
替换



与



保存我的一天。
手动添加是什么意思？你能解释得更具体一点吗，顺便问一下，有1的人存在吗？手动的意思是，如果我在url中手动输入的话。标记单击事件。如果我点击一个标记，重定向就可以很好地工作。在Angular 6应用程序中也会遇到同样的问题。你找到解决方法了吗？手动添加是什么意思？你能解释得更具体一点吗，顺便问一下，有1的人存在吗？手动的意思是，如果我在url中手动输入的话。标记单击事件。如果我点击一个标记，重定向就可以很好地工作。在Angular 6应用程序中也会遇到同样的问题。你找到办法了吗？没有！在我的情况下，将href=“./”替换为href=“/”解决了我的问题否！在我的情况下，将href=“./”替换为href=“/”解决了我的问题