當我從參數

中刪除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>

當英雄的用戶點擊它顯示的細節英雄和網址更改爲：

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

來源

2017-08-01 Ubiquitous Developers

任何東西在控制檯 –

是的。其實這麼多東西在控制檯上卻沒有任何關係，路由 –

發佈了錯誤 –

問題與您的ngOnDestroy this.sub.unsubscribe();，你是不是初始化sub。

你應該嘗試以下，

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

這將初始化sub與訂閱，作爲一個一般的做法我也使用ngOnDestroy空校驗建議（不是強制性的），

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

希望這有助於！

來源

2017-08-01 14:45:38

或創建一個名爲'ngUnsubscribe'的RxJs.Subject。然後做'this.ngUnsubscribe.next（）; this.ngUnsubscribe.complete（）;'在你的'ngOnDestroy'中，並用'takeUntil'訂閱，例如：'this.route。params.takeUntil（this.ngUnsubscribe）.subscribe ...' – cyrix

回答

相關問題