子組件未在父路由更改上更新

Question

我一直在試圖學習angular 2以及本教程[Build an application with Angular 2 and Firebase][1]並試圖擴展它。但是當試圖嵌套多條路線時，我遇到了一些障礙。

應用結構：

Goals – (has router-outlet) 
> Single Goal with Experiments list – (has router-outlet) 
    > Single Experiment – (has router-outlet) 
    > Experiment Notes 

路由器設定：

export const routerConfig : Route[] = [ 
    { 
    path: 'goals', 
    children: [ 
     { 
     path: ':id', component: SingleGoalComponent, 
     children: [ 
      { 
      path: 'experiments', 
      children: [ 
       { path: ':id', component: ExperimentDetailsComponent, 
       children: [ 
        { path: '', redirectTo: 'notes', pathMatch: 'full' }, 
        { path: 'notes', component: ExperimentNotesComponent } 
       ] 
       }, 
       { path: 'new', component: NewExperimentComponent }, 
       { path: '' } 
      ] 
      }, 
      { path: '', redirectTo: 'experiments', pathMatch: 'full' } 
     ] 
     }, 
     { path: '', component: GoalsComponent } 
    ] 
    }, 
    { path: 'notes', component: NotesComponent }, 
    { path: '', redirectTo: 'goals', pathMatch: 'full' }, 
    { path: '**', redirectTo: 'goals', pathMatch: 'full' } 
]; 

的問題

如果我在實驗列表點擊實驗1我克ot到goals/1/experiments/1/notes該網址是正確的，我看到了正確的實驗1的註釋。

如果我再點擊實驗2在實驗列表goals/1/experiments/2/notes的URL是正確的實驗細節是正確的，但在紙幣仍在實驗1個的Notes。

如果我再刷新瀏覽器，實驗2個負載和筆記現在實驗2個的Notes這是正確的。

這是我如何得到experimentId檢索票據

實驗，notes.component.ts

experimentId: string; 
    goalId: string; 

    constructor(
    private router: Router, 
    private route: ActivatedRoute, 
    private experimentsService: ExperimentsService, 
    private _location: Location) { } 

    ngOnInit() { 

    Observable.combineLatest(this.route.parent.params, this.route.parent.parent.params) 
     .forEach((params: Params[]) => { 
     this.experimentId = params[0]['id']; 
     this.goalId = params[1]['id']; 
     }); 

    console.log('Experiment ID: ' + this.experimentId + '| Goal Id: ' + this.goalId); 

    this.notes$ = this.experimentsService.findAllNotesForExperiment(this.experimentId); 

我敢肯定，這是一個明顯的錯誤，我正在做，但對於我的生活我無法看到我的錯在哪裏。

Answer 1

這是因爲ngOnInit（）方法是在創建組件期間僅調用。當你點擊實驗2時，你不會創建一個新的實驗組件。你只是使用舊的。

Url正在改變，因爲您仍然訂閱了路由參數。但您的服務電話不在Observable中。因此，只需將服務調用放入您的obserable中，然後每次更改路由參數時，都會加載新數據。

ngOnInit() { 

    Observable.combineLatest(this.route.parent.params, this.route.parent.parent.params) 
     .forEach((params: Params[]) => { 
     this.experimentId = params[0]['id']; 
     this.goalId = params[1]['id']; 

     console.log('Experiment ID: ' + this.experimentId + '| Goal Id: ' + this.goalId); 
     this.notes$ = this.experimentsService.findAllNotesForExperiment(this.experimentId); 
     }); 

Answer 2

的API已經改變了不少最新版本角5.2.5 作爲埃姆雷說，問題是，ngOnInit被稱爲只有當第一次創建子組件一次，創建後的組件需求要通知url更改，以便它可以再次獲取參數，這可以通過在Router對象上添加偵聽器，然後使用路由對象獲取所需的部分來完成。下面是基於英雄樣品應用的遊一些示例代碼：）

import {Component, Input, OnInit} from '@angular/core'; 
import {Hero} from '../hero'; 
import {HeroService} from "../hero.service"; 
import {ActivatedRoute, Router} from "@angular/router"; //Import Router and ActivatedRoute classes 
import {Location} from '@angular/common'; 
import {MessageService} from "../message.service"; 

@Component({ 
    selector: 'app-hero-detail', 
    templateUrl: './hero-detail.component.html', 
    styleUrls: ['./hero-detail.component.css'] 
}) 
export class HeroDetailComponent implements OnInit { 
    @Input() hero: Hero; 

    constructor(private route: ActivatedRoute, 
       private heroService: HeroService, 
       private messageService: MessageService, 
       private location: Location, 
       private router: Router) { 
    } 

    ngOnInit(): void { 
    this.router.events.subscribe((val) => {//Use Router class to subscribe to events 
     const id = +this.route.snapshot.paramMap.get('id');//When a route event occurs use the active route to update the parameter needed 
     this.getHero(id);//Do what you would have initially done with the url value 
    }); 
    } 

    getHero(id): void { 
    this.messageService.add(`HeroDetailComponent: fetching hero: ${id}`); 
    this.heroService.getHero(id) 
     .subscribe(hero => this.hero = hero); 
    } 

    goBack(): void { 
    this.location.back(); 
    } 
} 

最相關部分是在ngOnInit（