Angular router Params Observable可用的任何示例或場景？

我在Pluralsight課程（路由）中學習Angular Router Params Observable。Angular router Params Observable可用的任何示例或場景？

this.route.params.subscribe(params => {let id = params['id']})});

我知道在組件中，當params有變化時，我們使用上面的代碼。

我想知道一個例子，或者這種情況在實時應用程序中起作用嗎？

來源

2017-07-07 SVinayaka

從'child.route'到具有不同參數的類似'child.route'導航 –

'server/user/show/1'到'server/user/show/2'來顯示用戶詳細信息 –

我用我的應用程序是這樣的：

內部組件：

const userId$ = this.route.params.map(params=> params['userId']); 
userService.getUser(userId$) 
    .subscribe(users => this.users = users);

用戶服務

getUser(userId$){ 
    return userId$.flatMap(userId => this.http.get(url+'/'+userId); 
}

在上述情況下我已經宣佈的路線和userservice之間的關係。所以，當用戶點擊不同的用戶時，url會發生變化，並自動發送一個新的http請求並更新UI中的數據。所以基本上我是說，觀察路徑參數，如果'userId'值更改做http調用和更新UI。

來源

2017-07-07 13:52:38 Skeptor

假設您正在構建社交網站，並在一個頁面上列出所有朋友，並且用戶可以通過點擊他的名字打開朋友的個人資料頁面。

我們建立自己的房源頁面，你會顯示你所有的朋友在*ngFor循環象下面這樣：

<div *ngFor="let friend of friends"> 
    <a routerLink="/detailPage"> 
     <img [src]="friend.profilePic" /> 
     <span>{{friend.name}}</span> 
    </a> 
</div>

當我們瀏覽到detailPage你怎麼會知道顯示哪些朋友的細節？

有這樣做的幾種方法：

店的朋友在服務
存儲它的userId在localStorage的
把它作爲路線PARAM在URL

舉個例子，假設你點擊你的朋友的名字蝙蝠俠

第一種方法：

可以由兩個組件之間創建共享服務很容易地做到這一點，這顯示好友列表和DetailComponent它顯示了特定朋友的細節ListComponent。

這種方法的問題是，當您刷新頁面時，您將不會有userId，因爲JavaScript範圍被瀏覽器破壞，您無法與其他朋友分享您的朋友。假設你有一個朋友叫貓女誰要求你給蝙蝠俠的帳戶的鏈接，哎呀，你不能因爲你不知道它！

方法二：

在這裏，你會知道什麼是對頁面刷新，但不分享別人的鏈接仍然存在，這違背了社交網絡的目的問題userId。

第三條道路：

這是在這種情況下，最好的辦法，你將有更新的userId，你可以蝙蝠俠的個人資料的鏈接發送給貓女:)

所以你改變routerLink="/detailPage"到routerLink="/detailPage/{{friend.userId}}" 。

來源

2017-07-07 13:55:21 Dhyey

Angular router Params Observable可用的任何示例或場景？

回答

相關問題