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

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

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

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

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

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

また、を使用して、 "code"などのクエリパラメータを抽出できません($location.search()).code。持ってるみたい？上記のURLの＃の前がAngularをだます。

私が使う

$location.search('key', null)

これは私のキーを削除するだけでなく、URLの可視性からも削除するためです。

AngularJSフォーラムから回答を得ました。詳細については、このスレッドを参照してください

リンクはGoogleグループスレッドへのリンクであり、読みづらく、明確な答えが得られません。URLパラメータを削除するには

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

すべてのクエリパラメータを削除するには、次の操作を行います。

$location.search({});

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

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

アイテムをクリアするには、アイテムを削除して$$ 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-L443

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

delete $location.$$search.nameOfParameter;

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

$location.$$search = {};

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

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

しかし場合は html5mode あるtrueあなたが簡単にURLのクエリ文字列をクリアすることができます。

$location.search('');

または

$location.search({});

これにより、ウィンドウのビジュアルURLも変更されます。

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

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

他の回答のすべてが角度の場合にのみ動作しhtml5modeていますtrue。あなたはの外で作業している場合html5mode、その後に、$locationあなたのハッシュで生活することを「偽」の場所にのみ言及-そのためには$location.search/編集を見ることができない/実際のページの検索のparamsを修正。

角度読み込みの前にページのHTMLに挿入される回避策は次のとおりです。

<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>

使うだけ

$location.url();

の代わりに

$location.path();

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

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

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

$routeParams= null;

場所のハッシュをnullに設定するのはどうですか

$location.hash(null);

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

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

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

上記の回答を試しましたが、うまく動作しませんでした。私のために働いた唯一のコードは$window.location.search = ''

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

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

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

問題は、私が使用してページにリンクしている場合ということである<a href="https://stackoverflow.com/page/?x=1">代わりに、私は、同じようにクエリ文字列を削除しません、私は戻るボタンをクリックする必要がありますので、私のブラウザの履歴内の余分なエントリを取得二度、私が始めた場所に戻って取得します。これは一貫性のない動作ですが、実際にはこれはより正しいようです。

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

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

私のアプリのrun機能でこれを追加しました：

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

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

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

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

以下のために角度> 2、あなたは明確にしたいすべてのparamsにはnullを渡すことができます

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