Angular 4 - 更新路線，但不追加另一個店鋪的路線到URL

我有一個Angular 4.0.3的情況，我在頁面上有兩個<router-outlet>'s。Angular 4 - 更新路線，但不追加另一個店鋪的路線到URL

<router-outlet></router-outlet> 
<router-outlet name="nav"></router-outlet>

第一個插座將接受內容路線，第二個插座將接受路線導航。我用這個來實現導航;

router.navigate(['', {outlets: { nav: [route] } }],{skipLocationChange: true });

這改變了出口的內容，而無需更新URL - 因爲我不想看起來像任何url .. (nav:user)做。

問題是剩餘的插座。我想要的網址更新這些被點擊時，例如...

.../user/profile

功能，我可以得到兩個出口有適當的內容，但它一直追加nav出口的路線網址，例如這...

.../user/profile(nav:user)

有什麼辦法可以阻止它加入(nav:user)部分？

來源

2017-04-26 Ciel

除非有一些技巧我不知道...我不認爲你可以。地址欄是維護路由狀態的東西。因此，沒有地址欄中的輔助插座信息，路由器將不知道如何將正確的路由組件保留在輔助插座中。

你可以嘗試重寫navigateByUrl方法，如下所示：http://plnkr.co/edit/78Hp5OcEzN1jj2N20XHT?p=preview

export class AppModule { constructor(router: Router) { 
    const navigateByUrl = router.navigateByUrl; 

    router.navigateByUrl = function(url: string|UrlTree, extras: NavigationExtras = {skipLocationChange: false}): Promise<boolean> { 
     return navigateByUrl.call(router, url, { ...extras, skipLocationChange: true }); 
    } } }

你可能在這裏添加邏輯那就要檢查一下你需要這樣做上的路由。

來源

2017-04-26 20:39:24 DeborahK

我可以防止所需插座的狀態發生變化嗎？也許這會達到效果？ – Ciel

不改變狀態，你將如何路線？也許我不明白你的問題或你想達到的目標。你可以做一名運動員嗎？ – DeborahK

只有當用戶明確點擊導航鏈接時，指定的插座纔會更改。它不應該綁定到url - 我使用skipLocationChange來保持url跳轉時不變。 – Ciel

Angular 4 - 更新路線，但不追加另一個店鋪的路線到URL

回答

相關問題