当我从参数中删除id时，Angular2路由无法正常工作
我创建了HeroApp，其中显示了来自Service的Hero列表。当我们选择任何英雄，特定英雄显示的细节 我在这里展示了代码：
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>
当用户点击英雄时，它会显示Hero和url的详细信息更改为：
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.route.params.subscribe(params => {
let id = Number.parseInt(params['id']);
this.person = this.peopleService.get(id);
});
}
ngOnDestroy(){
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>
但是当我点击“返回”按钮时，它不会将我带到人员列表页面。虽然URL也不会改变。
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);
控制台中的错误：
EXCEPTION: Uncaught (in promise): TypeError: Cannot read property 'unsubscribe' of undefined
TypeError: Cannot read property 'unsubscribe' of undefined
at PeopleDetail.ngOnDestroy (http://localhost:3000/persondetail/app.peopleDetail.js:28:17)
at Wrapper_PeopleDetail.ngOnDestroy (/AppModule/PeopleDetail/wrapper.ngfactory.js:14:16)
at CompiledTemplate.proxyViewClass.View_PeopleDetail_Host0.destroyInternal (/AppModule/PeopleDetail/host.ngfactory.js:34:26)
at CompiledTemplate.proxyViewClass.AppView.destroy (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12365:18)
at CompiledTemplate.proxyViewClass.DebugAppView.destroy (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12720:42)
at CompiledTemplate.proxyViewClass.AppView.detachAndDestroy (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12349:18)
at ComponentRef_.destroy (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:7660:74)
at RouterOutlet.deactivate (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:4885:30)
at ActivateRoutes.deactiveRouteAndOutlet (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:4271:22)
at ActivateRoutes.deactiveRouteAndItsChildren (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:4231:20)
at ActivateRoutes.deactivateRoutes (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:4146:24)
at eval (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:4108:21)
at Array.forEach (<anonymous>)
at ActivateRoutes.deactivateChildRoutes (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:4107:31)
at ActivateRoutes.activate (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:4094:16)
ErrorHandler.handleError @ :3000/node_modules/@angular/core/bundles/core.umd.js:3491
:3000/node_modules/@angular/core/bundles/core.umd.js:3496 ORIGINAL STACKTRACE:
ErrorHandler.handleError @ :3000/node_modules/@angular/core/bundles/core.umd.js:3496
:3000/node_modules/@angular/core/bundles/core.umd.js:3497 Error: Uncaught (in promise): TypeError: Cannot read property 'unsubscribe' of undefined
TypeError: Cannot read property 'unsubscribe' of undefined
at PeopleDetail.ngOnDestroy (http://localhost:3000/persondetail/app.peopleDetail.js:28:17)
at Wrapper_PeopleDetail.ngOnDestroy (/AppModule/PeopleDetail/wrapper.ngfactory.js:14:16)
at CompiledTemplate.proxyViewClass.View_PeopleDetail_Host0.destroyInternal (/AppModule/PeopleDetail/host.ngfactory.js:34:26)
at CompiledTemplate.proxyViewClass.AppView.destroy (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12365:18)
at CompiledTemplate.proxyViewClass.DebugAppView.destroy (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12720:42)
at CompiledTemplate.proxyViewClass.AppView.detachAndDestroy (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12349:18)
at ComponentRef_.destroy (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:7660:74)
at RouterOutlet.deactivate (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:4885:30)
at ActivateRoutes.deactiveRouteAndOutlet (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:4271:22)
at ActivateRoutes.deactiveRouteAndItsChildren (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:4231:20)
at ActivateRoutes.deactivateRoutes (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:4146:24)
at eval (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:4108:21)
at Array.forEach (<anonymous>)
at ActivateRoutes.deactivateChildRoutes (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:4107:31)
at ActivateRoutes.activate (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:4094:16)
at resolvePromise (http://localhost:3000/node_modules/zone.js/dist/zone.js:665:31) [angular]
at resolvePromise (http://localhost:3000/node_modules/zone.js/dist/zone.js:636:17) [angular]
at http://localhost:3000/node_modules/zone.js/dist/zone.js:713:17 [angular]
at Object.onInvokeTask (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:4396:41) [angular]
at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:366:36) [angular]
at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:166:47) [<root> => angular]
at drainMicroTaskQueue (http://localhost:3000/node_modules/zone.js/dist/zone.js:546:35) [<root>]
at HTMLButtonElement.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:424:25) [<root>]
ErrorHandler.handleError @ :3000/node_modules/@angular/core/bundles/core.umd.js:3497
zone.js:522 Unhandled Promise rejection: Cannot read property 'unsubscribe' of undefined ; Zone: angular ; Task: Promise.then ; Value: TypeError: Cannot read property 'unsubscribe' of undefined
at PeopleDetail.ngOnDestroy (http://localhost:3000/persondetail/app.peopleDetail.js:28:17)
at Wrapper_PeopleDetail.ngOnDestroy (/AppModule/PeopleDetail/wrapper.ngfactory.js:14:16)
at CompiledTemplate.proxyViewClass.View_PeopleDetail_Host0.destroyInternal (/AppModule/PeopleDetail/host.ngfactory.js:34:26)
at CompiledTemplate.proxyViewClass.AppView.destroy (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12365:18)
at CompiledTemplate.proxyViewClass.DebugAppView.destroy (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12720:42)
at CompiledTemplate.proxyViewClass.AppView.detachAndDestroy (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12349:18)
at ComponentRef_.destroy (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:7660:74)
at RouterOutlet.deactivate (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:4885:30)
at ActivateRoutes.deactiveRouteAndOutlet (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:4271:22)
at ActivateRoutes.deactiveRouteAndItsChildren (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:4231:20)
at ActivateRoutes.deactivateRoutes (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:4146:24)
at eval (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:4108:21)
at Array.forEach (<anonymous>)
at ActivateRoutes.deactivateChildRoutes (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:4107:31)
at ActivateRoutes.activate (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:4094:16) TypeError: Cannot read property 'unsubscribe' of undefined
at PeopleDetail.ngOnDestroy (http://localhost:3000/persondetail/app.peopleDetail.js:28:17)
at Wrapper_PeopleDetail.ngOnDestroy (/AppModule/PeopleDetail/wrapper.ngfactory.js:14:16)
at CompiledTemplate.proxyViewClass.View_PeopleDetail_Host0.destroyInternal (/AppModule/PeopleDetail/host.ngfactory.js:34:26)
at CompiledTemplate.proxyViewClass.AppView.destroy (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12365:18)
at CompiledTemplate.proxyViewClass.DebugAppView.destroy (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12720:42)
at CompiledTemplate.proxyViewClass.AppView.detachAndDestroy (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12349:18)
at ComponentRef_.destroy (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:7660:74)
at RouterOutlet.deactivate (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:4885:30)
at ActivateRoutes.deactiveRouteAndOutlet (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:4271:22)
at ActivateRoutes.deactiveRouteAndItsChildren (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:4231:20)
at ActivateRoutes.deactivateRoutes (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:4146:24)
at eval (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:4108:21)
at Array.forEach (<anonymous>)
at ActivateRoutes.deactivateChildRoutes (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:4107:31)
at ActivateRoutes.activate (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:4094:16)
consoleError @ zone.js:522
zone.js:524 ZoneAwareError
我希望单击后退按钮时会显示peopleList。
1 个答案:
答案 0 :(得分：1)
问题是你的ngOnDestroy中有this.sub.unsubscribe();，你没有初始化sub。
你应该在下面试试，
this.sub = this.route.params.subscribe...
这将初始化sub订阅，作为一般做法，我也建议（非强制性）在ngOnDestroy中使用空检查，
ngOnDestroy(){
if(!!this.sub){
this.sub.unsubscribe();
}
}
希望这会有所帮助!!
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？