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

Posted 2023-03-13

技术标签:

【中文标题】当我在 url 中手动添加参数时，角度路由不起作用【英文标题】：Angular Routing not working when I manualy add parameter in url 【发布时间】：2018-01-12 12:00:36 【问题描述】：

我创建了 HeroApp，我在其中显示来自服务的英雄列表，遵循 this tutorial。

当用户选择任何英雄时，会显示该特定英雄的详细信息。但是，当我如下手动将英雄 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：

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;

app.personList.html

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

当用户点击英雄时，它会显示英雄的详细信息，并且 url 会变为：

http://localhost:3000/persons/2

app.personDetail.ts：

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.html：

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

routing.ts：

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

【问题讨论】：

手动添加是什么意思？能否请您更具体地解释一下，顺便说一下有 1 的人存在吗？手动表示，如果我在 url 中手动输入。标签点击事件。如果我单击标签重定向效果很好。在 Angular 6 应用程序中遇到同样的问题。你找到解决办法了吗？ 【参考方案1】：

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

【讨论】：

【参考方案2】：

我在 Angular 6 中遇到了同样的问题，当传递像 bid/12345(bid/:id) 这样的参数时。

解决它替换