각도 5 쿼리 매개변수 제거

각도 5 쿼리 매개변수 제거

URL에서 쿼리 매개 변수를 제거하려면 어떻게 해야 합니까? 예:www.expample.com/home?id=123&pos=sd&sd=iii로.www.expample.com/home?id=123&sd=iii

편집: 제 버전입니다.

this.activatedRoute.queryParams.subscribe(c => {
  const params = Object.assign({}, c);
  delete params.dapp;
  this.router.navigate([], { relativeTo: this.activatedRoute, queryParams: params });
}).unsubscribe();

다음을 사용하여 쿼리 매개 변수를 제거할 수 있습니다.merge옵션의queryParamsHandling지나가면서null제거하고자 하는 모든 매개 변수에 대해 적용됩니다.

// Remove query params
this.router.navigate([], {
  queryParams: {
    'yourParamName': null,
    'youCanRemoveMultiple': null,
  },
  queryParamsHandling: 'merge'
})

이 옵션은 더 간단하며 다른 매개 변수를 제거하지 않는 데 필요한 작업량이 적습니다.또한 구성 요소가 손상되었을 때 관찰 가능한 구독을 정리할 걱정도 없습니다.

업데이트: 아래 @epelc의 답변은 이를 위한 최신의 정확한 방법인 https://stackoverflow.com/a/52193044/5932590 입니다.

---

안타깝게도, 현재 이를 위한 명확한 방법은 없습니다: https://github.com/angular/angular/issues/18011 .그러나 jasonaden이 링크된 스레드에 대해 언급한 바와 같이,

이 작업은 기존 쿼리와 새 쿼리 파라미터를 병합하여 사용자가 원하지 않는 키를 제거하여 수동으로 수행할 수 있습니다.

이를 위한 한 가지 방법은 다음과 같습니다.

쿼리 Params가 일부 속성에 저장되어 있다고 가정해 보겠습니다.

class MyComponent() {
  id: string;
  pos: string;
  sd: string;

  constructor(private route: ActivatedRoute, private router: Router) {}

  ngOnInit() {
    this.route.url.subscribe(next => {
      const paramMap = next.queryParamMap;
      this.id = paramMap.get('id');
      this.pos = paramMap.get('pos');
      this.sd = paramMap.get('sd');
    });
  }
}

이를 제거하기 위한 방법.pos매개 변수는 다음과 같습니다.

clearPosParam() {
  this.router.navigate(
    ['.'], 
    { relativeTo: this.route, queryParams: { id: this.id, sd: this.sd } }
  );
}

이렇게 하면 현재 경로로 효과적으로 이동하여 해당 경로를 삭제할 수 있습니다.pos쿼리 매개 변수, 다른 쿼리 매개 변수를 동일하게 유지합니다.

이것은 내가 찾은 최고의 설션입니다. url 파라미터를 변경할 수 있습니다.

건설업자용

    private _ActivatedRoute: ActivatedRoute

그런 다음 initor 또는 constructor body에서 이를 사용합니다.

    var snapshot = this._ActivatedRoute.snapshot;
    const params = { ...snapshot.queryParams };
    delete params.pos
    this.router.navigate([], { queryParams: params });

저는 이것을 정확히 하려고 했는데 라우터를 사용하지 않았습니다.제가 생각해낸 것은 다음과 같습니다.

import { Location } from '@angular/common';
import { HttpParams } from '@angular/common/http';

declare location: Location; // get this from dependency injection

const [path, query] = location.path().split('?');
const params = new HttpParams({ fromString: query });
const theValueIWant = params.get('theParamIWant');
location.replaceState(path, params.delete('theParamIWant').toString());

쿼리 매개 변수 제거 중:

import { Router, ActivatedRoute, Params } from '@angular/router';

constructor(private router: Router, private activatedRoute: ActivatedRoute){
}

setQueryParams(){
    const qParams: Params = {};
    this.router.navigate([], {
        relativeTo: this.activatedRoute,
        queryParams: qParams,
        queryParamsHandling: ''
    });
}

native javascript operation을 사용하여 url에서 queryParams를 제거하고 View로 이동할 수 있습니다.navigateByUrl방법

https://angular.io/api/router/Router#navigateByUrl

this.route.queryParams
      .subscribe((params: Params) => {
        if (params && Object.keys(params).length > 0) {
          const urlWithoutQueryParams = this.router.url.substring(0, this.router.url.indexOf('?'));
          this.router.navigateByUrl(urlWithoutQueryParams)
            .then(() => {
            // any other functionality when navigation succeeds
              params = null;
            });
        }
      });
   

쿼리 매개변수를 쉽게 처리할 수 있도록 몇 가지 라우터 프로토타입 오버라이드를 작성했습니다.

이 아이디어는 기능을 매번 내보내고 기능을 다시 선언할 필요 없이 라우터에서 방법을 호출하여 매개 변수를 통해 라우팅을 쉽게 관리하는 것입니다.

만들기index.d.ts프로토타입 오버라이드 정의를 포함하는 파일:

// Ensure this is treated as a module.
export { };

declare module '@angular/router' {
    interface Router {
        updateQueryParams(activatedRoute: ActivatedRoute, params: Params): Promise<boolean>;
        setQueryParams(activatedRoute: ActivatedRoute, params: Params): Promise<boolean>;
        removeQueryParams(activatedRoute: ActivatedRoute, ...keys: string[]): Promise<boolean>;
    }
}

중요:

이 프로토타입 오버라이드를 사용하기 전에 이 파일을 가져오는지 확인하십시오. 방금 프로토타입 가져오기를 에 추가했습니다.app.module.ts:

import './shared/prototype-overrides/router.prototypes';

---

쿼리 매개변수 설정

이렇게 하면 지정된 쿼리 매개 변수만 설정되고 매개 변수는 병합되지 않습니다.

시나리오

다음 경로에 있습니다.

http://localhost:4200/#/some-route?param1=Test&param2=test2

쿼리 매개 변수를 다음과 같이 설정할 수 있습니다.param3=HelloWorld다른

사용.

this.router.setQueryParams(this.activatedRoute, { param3: 'HelloWorld' });

// Will route to http://localhost:4200/#/some-route?param3=HelloWorld

프로토타입 기능 구현

Router.prototype.setQueryParams = function (activatedRoute: ActivatedRoute, params: Params): Promise<boolean> {
    const context: Router = this;

    if (isNullOrUndefined(activatedRoute)) {
        throw new Error('Cannot update the query parameters - Activated Route not provided to use relative route');
    }

    return new Promise<boolean>((resolve) => {
        setTimeout(() => {
            resolve(context.navigate([], {
                relativeTo: activatedRoute,
                queryParams: params
            }));
        });
    });
};

---

쿼리 매개 변수 업데이트 중

이 기능은 쿼리 매개 변수를 경로에 병합하는 쿼리 매개 변수를 쉽게 업데이트하는 데 사용되므로 중복 쿼리 매개 변수가 없습니다.

시나리오

다음 경로에 있습니다.

http://localhost:4200/#/some-route?param1=Test&param2=test2

하나의 쿼리 매개 변수만 업데이트하고 싶은 경우,param1param1=HelloWorld 놔둬요 요 은 요 은 .

사용.

this.router.updateQueryParams(this.activatedRoute, { param1: 'HelloWorld' });

// Will route to http://localhost:4200/#/some-route?param1=HelloWorld&param2=test2

프로토타입 기능 구현

Router.prototype.updateQueryParams = function (activatedRoute: ActivatedRoute, params: Params): Promise<boolean> {
    const context: Router = this;

    if (isNullOrUndefined(activatedRoute)) {
        throw new Error('Cannot update the query parameters - Activated Route not provided to use relative route');
    }

    // setTimeout required because there is an unintended behaviour when rapidly firing router updates in the same repaint cycle:
    // 
    // NavigationCancel - Navigation ID 2 is not equal to the current navigation id 3
    // https://stackoverflow.com/a/42802182/1335789
    return new Promise<boolean>((resolve) => {
        setTimeout(() => {
            resolve(context.navigate([], {
                relativeTo: activatedRoute,
                queryParams: params,
                queryParamsHandling: 'merge'
            }));
        });
    });
};

---

쿼리 매개 변수 제거 중

시나리오

다음 경로에 있습니다.

http://localhost:4200/#/some-route?param1=Test&param2=test2&param3=test3

하나(또는 문자열로 구분된 키) 쿼리 매개 변수만 제거하려면,param1 놔둬요 요 은 요 은 .

사용.

this.router.removeQueryParams(this.activatedRoute, 'param1');

// Will route to http://localhost:4200/#/some-route?param2=test2&param3=test3

//Removing multiple parameters:
this.router.removeQueryParams(this.activatedRoute, 'param1', 'param3');

// Will route to http://localhost:4200/#/some-route?param2=test2

프로토타입 기능 구현

Router.prototype.removeQueryParams = function (activatedRoute: ActivatedRoute, ...keys: string[]): Promise<boolean> {
    const context: Router = this;

    const currentParams: any = {};
    Object.keys(activatedRoute.snapshot.queryParams).forEach(key => {
        currentParams[key] = activatedRoute.snapshot.queryParams[key];
    });
    keys?.forEach(key => {
        delete currentParams[key];
    });

    return new Promise<boolean>((resolve) => {
        setTimeout(() =>
            resolve(context.setQueryParams(activatedRoute, currentParams))
        );
    });
};

효과가 있었습니다.

1단계: 글로벌 URL 검색 파라미터를 선언합니다.

  incomingUrlParams: URLSearchParams;

2단계: urlsearchparam 글로벌 변수에 쿼리 저장

this.incomingUrlParams = new URLSearchParams(window.location.search);

3단계: 파라미터가 저장되면 아무 곳이나 호출합니다.

clearQueryParamenters() {
      let queryParamsJsonString: string = "";      
      this.incomingUrlParams.forEach(function(value, key) {
        queryParamsJsonString += '"' + key + '":' + null + ',';
      });
      queryParamsJsonString = "{" + queryParamsJsonString.trim().replace(/(^,)|(,$)/g, "") + "}";
      this.router.navigate([], {
        queryParams: JSON.parse(queryParamsJsonString),
        queryParamsHandling: 'merge'
      })
  }

위의 어떤 해결책도 저에게는 좋지 않았습니다.제가 이 방법을 시도하기 전까지는.

import { Component } from '@angular/core';
import { Location } from '@angular/common';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent {
  constructor(private location: Location) { }

  changeUrl() {
    const newUrl = '/prepare/this/url/yourself/and/exclude/parameter';
    this.location.replaceState(newUrl);
  }
}

이렇게 하면 매개 변수의 URL 버전이 새 URL로 대체되고 구성 요소가 다시 렌더링되지 않는 것이 좋습니다.
상태 바꾸기에 대한 자세한 내용은 여기 있습니다.

언급URL : https://stackoverflow.com/questions/48552993/angular-5-remove-query-param