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

Posted

技术标签:

【中文标题】当我在 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 之前有 &lt;base href="/"&gt;

【讨论】:

【参考方案2】:

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

解决它 替换

<base href="/">

<base href="./">

拯救我的一天。

【讨论】:

不!在我的情况下,将 href="./" 替换为 href="/" 解决了我的问题

以上是关于当我在 url 中手动添加参数时,角度路由不起作用的主要内容,如果未能解决你的问题,请参考以下文章

部署到 tomcat 9(Ubuntu 18.04)时,角度路由不起作用

手动刷新或写入时,React-router url 不起作用

手动刷新或写入时,React-router url 不起作用

当在浏览器中直接访问 URL 但单击到时,角度路由不起作用?

使用多个参数(字符串、日期时间)的路由不起作用

聚合物Ajax绑定路由参数不起作用