当我在 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
之前有 <base href="/">
。
【讨论】:
【参考方案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 不起作用