用相同的URL參數重新加載Angular 4+路由

我一直在做一些研究重新加載Angular 4+路由，它看起來好像首選的方法是，而不是監聽組件內的URL參數更改並重新初始化那裏的組件。用相同的URL參數重新加載Angular 4+路由

我遇到的問題是試圖找到一個DRY（不要重複自己）的方法，使這個工作跨多個組件，當URL將是相同的（包括參數）。在AngularJS中，UI路由器很簡單。

使用案例：

我有可以「浮動」的任何路線上面，點擊它需要去到它涉及到內容的通知時，通知面板 - 這可能是許多不同類型的內容。

例如：/posts/:id或/groups/:id或/users/:id

如果用戶已經在看的內容也不會重新加載和刷新，以反映該通知的消息。即，「John Doe對您的帖子發表了評論」（用戶可能正在查看該帖子的過時版本），或者「Jane Doe接受了您加入某個羣組的請求」（用戶可能正在查看該羣組的訪客視圖）。

我沒有考慮檢測的路線是一樣的，當使用window.location.reload()，和這樣的作品，但它是極不可取，由於它引起的開銷（角度重新初始化，身份驗證檢查，插座重新連接，等等）。

任何建議將不勝感激！

來源

2017-10-09 Jamie Street

當URL中沒有任何更改時，無法僅重新加載路由。事實上，您擁有的唯一選項是window.location.reload()並且聽取參數更改。

對於第二個選項，您可以創建一個通用服務，它將查看查詢字符串中參數id的更改。讓我們把它IdWatchService，它會是這個樣子：

@Injectable() 
export class IdWatchService { 
    constructor(private route: ActivatedRoute) { 
    } 

    get idChange(): Observable<number | undefined> { 
    return this.route.queryParams.map(p => p['id'] as number | undefined).distinctUntilChanged(); 
    } 
}

然後你就可以在需要的變化（PostsComponent，GroupsComponent等）反應成分添加此服務的providers列表。最後，您可以將其注入到這些相同的組件和訂閱idChange觀察到：

@Component({ 
    templateUrl: './posts.component.html', 
    providers: [ 
    IdWatchService 
    ] 
}) 
export class PostsComponent { 
    constructor(idWatchService: IdWatchService) { 
    idWatchService.idChange.subscribe(id => { 
     // Load data for the new ID and refresh the view 
    }); 
    } 
}

來源

2017-10-09 12:24:18

我覺得這不是什麼問題。引用來自問題> URL何時會相同（包括參數） – asmmahmud

@asmmahmud的確，我明白了。但是，如果沒有'window.location.reload（）'，沒有辦法做到這一點。我稍微修改了一下我的答案，以說明這一點。 –

我面臨同樣的情況（非常類似於用例）早在角2.像其他的答案說，我在那裏發現沒有建立在這樣做的角度上（也許框架的假設是，這種情況應該通過傾聽參數的變化來解決）。

就像你，我不想重寫我的代碼，所以我使用了一個不同的解決方案，它有點更加黑客，但它工作時沒有太多需要改變。

我使用的解決方案是在僱傭組織的相同級別下創建一個虛擬路由，您需要重新加載頁面。在虛擬路由中，我使用了一個DummyComponent，它在路由參數中接收數據，描述我們需要到達的下一條路徑（我們想要重新載入的路徑）以及應該傳遞給它的哪個參數（例如，您身份已經提到），然後我使用導航方法注入的Rounter類去該路線。

我認爲這個解決方案會比使用window.reload更加高效，而且寫起來非常簡單。（我無法複製該代碼示例，因爲我無法訪問該代碼）

來源

2017-11-06 12:03:51

-2

window.location.reload（）;

這對我來說很有用。

來源

2017-11-06 12:51:39

這將刷新整個頁面 – uriz

在這種情況下，您的路線不會改變，只是您的參數改變。

要解決此問題，您需要訂閱ActivatedRoute參數。

export class MyClass implements OnInit { 
    constructor(private activatedRoute: ActivatedRoute) { 
     this.activatedRoute.params.subscribe((params)=>{ 
      console.log('updatedParams', params); 
     }); 
    } 
}

來源

2017-12-08 11:18:18

我面臨與在報頭通知部同樣的問題我已經解決了這個問題，DoCheck

import { Component, DoCheck } from '@angular/core';

在類執行DoCheck接口

export class HeaderComponent implements DoCheck {

然後使用ngDoCheck（）方法並驗證變量值是否更改，它將在您的通知區域中顯示相同內容

ngDoCheck() { 
    // check if values changes 
}

來源

2018-01-05 13:15:45 sankey

通過this.router.url您將獲得當前頁面的url。比使用queryParames的路由器導航。以下是將queryParams作爲分頁頁面傳遞的示例。你可以使用類似的方法。

const url = this.router.url.split('?')[0]; // this will remove previous queryparms 
    this.router.navigate([url], { queryParams: { page: $event } });

來源

2018-03-03 08:53:34

用相同的URL參數重新加載Angular 4+路由

回答

相關問題