Question

我创建了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的详细信息更改为：

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

参考链接：https://www.barbarianmeetscoding.com/blog/2016/03/25/getting-started-with-angular-2-step-by-step-1-your-first-component/

Answer 1

问题是你的ngOnDestroy中有this.sub.unsubscribe();，你没有初始化sub。

你应该在下面试试，

 this.sub = this.route.params.subscribe...

这将初始化sub订阅，作为一般做法，我也建议（非强制性）在ngOnDestroy中使用空检查，

ngOnDestroy(){
  if(!!this.sub){
    this.sub.unsubscribe();
  }
}

希望这会有所帮助!!

当我从参数中删除id时，Angular2路由无法正常工作

1 个答案: