リロード同じURLパラメータを使用した角度4+ルート

Question

Angular 4+ルートをリロードするためのリサーチを行ってきましたが、代わりにコンポーネント内のURLパラメータの変更をリッスンして再初期化するその代わりにコンポーネント。

私が気付いている問題は、URLが同一の（パラメータを含む）場合、複数のコンポーネントにわたってこの作業を行うDRY（自分自身を繰り返さない）アプローチを見つけることにあります。 AngularJSでは、これはUI-routerで簡単でした。

ユースケース：

は、私は任意の経路上で「フロート」は、通知は、それはそれはに関連するコンテンツに移動する必要がクリックされることができ、通知パネルを持っている - これは、多くの異なる種類のことができますコンテンツ。例えば

：ユーザーがすでにそのコンテンツを見ている場合/posts/:idまたは/groups/:idまたは/users/:id

それはリロードし、通知のメッセージを反映するために更新されません。 （ユーザーがそのグループのゲストビューを見ている可能性があります）。 "Joe Doeがあなたの投稿にコメントしました。

私はルートが同じであることを検出した場合にwindow.location.reload()を使用してに見ていた、それは動作しますが、それが原因それが引き起こすオーバーヘッド（角度再初期化、認証チェック、ソケットの再接続など）に非常に望ましくないです。

ご意見をいただければ幸いです！

Answer 1

URLで何も変更されていないときにルートを再ロードする方法はありません。実際、あなたが持っている唯一のオプションはwindow.location.reload()で、パラメータの変更を聞いています。

2番目のオプションでは、クエリ文字列のid引数の変更を監視する汎用サービスを作成できます。

@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のリストにこのサービスを追加することができますのはIdWatchServiceそれを呼び出すと、それは次のようになりましょう。そして最後に、あなたはそれらの同じコンポーネントにそれを注入し、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 
    }); 
    } 
} 

Answer 2

私はそこに見つけ、バック2の角度で同じシナリオ（非常に似ユースケース）に直面しましたこれを行うために角度をつけて構築されたものではありませんでした（おそらくフレームワークの前提は、そのようなケースはパラメータの変更を聴くだけで解決されるはずです）。

私のコードを書き直したかったわけではありませんでしたので、もう少しハッキリした別のソリューションを使用しましたが、変更する必要はありませんでした。

私が使用した解決策は、ページをリロードする必要がある同じ階層レベルのダミールートを作成することでした。ダミールートの中で私はDummyComponentを使って、次のルートに行く必要のあるもの（リロードしたいもの）と、どのparamsに渡すべきかを示すparamsデータを受け取ります（id私はそのルートに行くために、注入されたRounterクラスをnavigateメソッドで使用しました。

私はこの解決策がwindow.reloadを使用するよりはるかに効率的で、書き込みが簡単だと思います。 （私はそのコードにアクセスできないため、そのコード例をコピーできません）

Answer 3

window.location.reload（）;

それは私の仕事です。

Answer 4

この場合、ルートは変更されず、パラメータが変更されます。

この問題を解決するには、ActivatedRouteパラメータを購読する必要があります。私は

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

クラスで使用するとDoCheckインターフェース

export class HeaderComponent implements DoCheck { 

を実装DoCheckでこの問題を解決したヘッダ における通知部と同じ問題に直面した

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

Answer 5

ngDoCheck（）メソッドを呼び出して、変数値が変更されていることを確認して、通知領域に同じ値を表示します

ngDoCheck() { 
    // check if values changes 
} 

Answer 6

this.router.url現在のページのURLが表示されます。 queryParamesの場合と同様に、ルータのナビゲーションを使用します。以下は、ページ区切りのページとしてqueryParamsを渡す例です。あなたは同様のapprochを使うことができます。

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