web-dev-qa-db-ja.com

AngularJS：URLのクエリパラメーターをクリアする方法は？

私のAngularJSアプリケーションは、ユーザーのLinkedInプロファイルにアクセスする必要があります。これを行うには、コールバックredirect_uriパラメーターを含むLinkedIn URLにユーザーをリダイレクトする必要があります。このパラメーターは、ユーザーをWebアプリにリダイレクトし、URLに「コード」クエリパラメーターを含めるように指示します。これは、従来のOauth 2.0フローです。

LinkedInがユーザーを次のURLにリダイレクトすることを除いて、すべてがうまく機能します。

http://localhost:8080/?code=XXX&state=YYY#/users/123/providers/LinkedIn/social-sites

URLをきれいにするために、URLから?code=XXX&state=YYYを削除したいと思います。ユーザーは、LinkedInリダイレクトから受け取ったクエリパラメーターを表示する必要はありません。

$location.absUrl($location.path() + $location.hash()).replace()を試しましたが、URLにクエリパラメータを保持します。

また、クエリパラメータを抽出することもできません。 「コード」、_​​($location.search()).codeを使用。持っているようですか？上記のURLの＃の前にAngularがだまされています。

angularjsangular
130
alecswan

私はAngularJSフォーラムから答えを得ました。詳細については、 this thread を参照してください

リンクはGoogleグループスレッドへのリンクです。スレッドは読みにくく、明確な回答を提供しません。 URLパラメータを削除するには

$location.url($location.path());
104
alecswan

私が使う

$location.search('key', null)

これにより、キーが削除されるだけでなく、URLの可視性からも削除されるためです。

147
Julius

ALLクエリパラメータを削除するには、次のようにします。

$location.search({});

ONE特定のクエリパラメータを削除するには、次のようにします。

$location.search('myQueryParam', null);
63
Rahul Desai

アイテムをクリアするには、アイテムを削除して$$ composeを呼び出します

    if ($location.$$search.yourKey) {
        delete $location.$$search.yourKey;
        $location.$$compose();
    }

angularjsソースから派生： https://github.com/angular/angular.js/blob/c77b2bcca36cf199478b8fb651972a1f650f646b/src/ng/location.js#L419-L44

29
basarat

次を使用して、特定のクエリパラメータを削除できます。

delete $location.$$search.nameOfParameter;

または、検索を空のオブジェクトに設定することで、すべてのクエリパラメーターをクリアできます。

$location.$$search = {};
27
Quintin

執筆時点で、@ Boshで前述したように、$location.search()を設定してウィンドウのビジュアルURLに反映させるには、html5modeをtrueにする必要があります。

詳細については、 https://github.com/angular/angular.js/issues/1521 を参照してください。

ただし、ifhtml5modeis trueを使用すると、URLのクエリ文字列を簡単にクリアできます：

$location.search('');

または

$location.search({});

これにより、ウィンドウの視覚的なURLも変更されます。

（AngularJSバージョン1.3.0-rc.1でhtml5Mode(true)でテスト済み。）

26
Fredric

html5mode = falseのときに動作させる必要がありますか？

他のすべての回答は、Angularのhtml5modeがtrueである場合にのみ機能します。 html5modeの外で作業している場合、$locationはハッシュにある「偽の」場所のみを参照するため、$location.searchは実際のページの検索パラメーターを表示/編集/修正できません。

これがページのHTMLに挿入される回避策ですbefore angularのロード：

<script>
  if (window.location.search.match("code=")){
    var newHash = "/after-auth" + window.location.search;
    if (window.history.replaceState){
      window.history.replaceState( {}, "", window.location.toString().replace(window.location.search, ""));
    }
    window.location.hash = newHash;
  }
</script>
12
Bosh

ただ使う

$location.url();

の代わりに

$location.path();
5
kevinius

別のURLに移動してクエリパラメータをクリアする場合は、次を使用します。

$location.path('/my/path').search({});
3
luizfelippe

ルートパラメータを使用している場合は、$ routeParamsをクリアするだけです

$routeParams= null;
1
Oswaldo Alvarez

すべてのクエリパラメータを次の1行で置き換えることができます：$location.search({});
理解しやすく、簡単に解決できます。

0
Lucas Reppe Welander

受け入れられた答えは私にとってはうまくいきましたが、戻るボタンの問題を修正するには、もう少し掘り下げる必要がありました。

私が気づいたのは、<a ui-sref="page({x: 1})">を使用してページにリンクし、$location.search('x', null)を使用してクエリ文字列を削除しても、ブラウザーの履歴に余分なエントリが表示されないため、[戻る]ボタンをクリックすると元に戻ります。 Angularがこの履歴エントリを自動的に削除するとは思わないため、これは間違っているように感じますが、実際にはこれは特定のユースケースで望ましい動作です。

問題は、代わりに<a href="/page/?x=1">を使用してページにリンクした場合、同じ方法でクエリ文字列を削除すると、Idoが追加のエントリを取得することですブラウザの履歴なので、戻るボタンtwiceをクリックして、開始した場所に戻る必要があります。これは一貫性のない動作ですが、実際にはこれはより正しいようです。

$location.search('x', null).replace()を使用すると、hrefリンクの問題を簡単に修正できますが、ui-srefリンクを介してページに到達すると、ページが破損するため、これは良くありません。

いじくり回した後、これは私が思いついた修正です：

私のアプリのrun関数にこれを追加しました：

$rootScope.$on('$locationChangeSuccess', function () {
    $rootScope.locationPath = $location.path();
});

次に、このコードを使用してクエリ文字列パラメーターを削除します。

$location.search('x', null);

if ($location.path() === $rootScope.locationPath) {
    $location.replace();
}
0
Moo

上記の答えを試してみましたが、動作させることができませんでした。私のために働いた唯一のコードは$window.location.search = ''でした

0
Gwen Au

パラメータをすぐに処理してから次のページに移動する場合、新しい場所の最後に疑問符を付けることができます。

たとえば、$ location.path（ '/ nextPage'）;を実行した場合

代わりにこれを行うことができます：$ location.path（ '/ nextPage？'）;

0
user5487176

Angular> 2の場合、クリアするすべてのパラメーターにnullを渡すことができます

this.router.navigate(['/yourRoute'], {queryParams:{params1: null, param2: null}})
0
Fateh Mohamed

ロケーションハッシュをnullに設定するだけでどうですか

$location.hash(null);
0
Bwyss