2017-10-06 52 views
0

在「ProfileComponent」,這顯示當前的輪廓,還有其它配置文件的列表,所以當我嘗試通過導航到其他的個人資料...角2導航同一組件的內部

this.router.navigate(['/profile/' + profileID]); 

它在URL變化PARAMS從http://localhost:4200/profile/fsfterthjkj5

http://localhost:4200/profile/hj45k35v

但分量一直顯示相同的配置文件。 我可以通過簡單地將新配置文件分配給舊配置文件並角度更新頁面上的所有數據來重新渲染組件,但是...我如何做到這一點我可以通過單擊「返回」回到舊配置文件,瀏覽器中的按鈕。

我嘗試重新加載PARAMS後改變頁面 - 這種角度也呈現我需要的配置文件,但我仍然無法回去,PARAMS只是改變了網址,並沒有影響頁面,它沒有任何意義上的要求重新加載後相同的數據,而已經加載。

回答

2

當你要瀏覽到您需要預訂的路線參數的可觀察到不同的參數相同的組件。

進口:

import { ActivatedRoute } from '@angular/router'; 

構造:

constructor(private route: ActivatedRoute) { } 

的OnInit的生命週期鉤:

ngOnInit(): void { 
    this.route.params.subscribe(
     params => { 
      const id = +params['id']; 
      this.getMovie(id); 
     } 
    ); 
} 

每次路線參數改變而不改變部件,內代碼訂閱方法將執行。

在這個例子中,我從參數中提取id並使用它來獲得具有定義id的電影。

像這樣的東西應該適合您的情況。

+0

DeborahK謝謝。它實際上工作!!) –

+0

順便說一句。我通過你在pluralsight教程學習角度..)))所以,非常感謝,以及!!)你太棒了! –

+0

非常感謝! (並且我也有一個Angular Routing課程,如果你對更多的路由細節感興趣,比如:https://app.pluralsight.com/library/courses/angular-routing) – DeborahK

0

確定解決我猜... 只是實現這個[href]="testFunc(profile.userId)"

testFunc(id){ return '/profile/' + id;} 
+0

這可能不是最好的答案。它基本上「跳過」路由。這可能會給您帶來其他問題。當您想要導航到具有不同參數的相同組件時,您需要訂閱路由參數的Observable。 – DeborahK