Обновите URL angular - PullRequest
       7

Обновите URL angular

0 голосов
/ 21 апреля 2020

У меня есть степпер. На шагере у меня есть следующий URL: localhost: 4200 / new-form. После отправки первой формы я получаю от backend publicId, который я должен установить в своем URL (localhost: 4200 / new-form / publicId), я пытаюсь это сделать, но он не работает должным образом.

            return this.dataService
        .putData(this.formData)
        .pipe(
            tap(res => {
                console.log(res.publicId)
                if (res.publicId) {
                    this.authService.setPublicId(res.publicId);
                    this._router.navigate([], {
                        relativeTo: this._route,
                        queryParams: {
                            publicId: res.publicId
                        },
                        queryParamsHandling: 'merge',
                        skipLocationChange: true,

                    });
                    console.log(this._router.url);
                }
                this.isStepCompleted = true;
            }),
this._router.url is : "/new-form?publicId=%22svvJGIICIGtEEtBBrDtBFAHErwGIvFCv%22" 
expected result: "/new-form/svvJGIICIGtEEtBBrDtBFAHErwGIvFCv"

Ответы [ 2 ]

0 голосов
/ 21 апреля 2020

Angular маршрутизатор не восстанавливает или не обновляет sh страницу при переходе к тому же компоненту. Другими словами, переход к тому же компоненту не вызовет конструктор компонента или функцию ngOnInit.

После этого я предлагаю вам сделать следующее:

Сначала создайте * Функция 1005 *, в которой вы будете выполнять refre sh logi c вашего компонента.

Во-вторых, вы можете выполнять эти init() функции двумя способами:

  1. Используйте функцию init() в вашей подписке на службу данных (где вы используете навигацию с помощью параметра)
return this.dataService
        .putData(this.formData)
        .pipe(
            tap(res => {
                console.log(res.publicId)
                if (res.publicId) {
                    this.authService.setPublicId(res.publicId);
                    this._router.navigate([], {
                        relativeTo: this._route,
                        queryParams: {
                            publicId: res.publicId
                        },
                        queryParamsHandling: 'merge',
                        skipLocationChange: true,

                    });
                    console.log(this._router.url);
                    this.init();   // <----------------- here you'll call the init function
                }
                this.isStepCompleted = true;
            })

ИЛИ

2. Вставьте ActivatedRoute в конструктор компонента и используйте его для подписки на изменения параметров запроса, где вы будете выполнять функцию init().

constructor(private activateRoute: ActivatedRoute) {
    activateRoute.params.subscribe(params => {
      this.init()
      // here you'll get the parameter like this: params['publicId']);
    })
  }
0 голосов
/ 21 апреля 2020

Это потому, что вы использовали параметры запроса, они отличаются от ожидаемых вами параметров маршрутизатора. Попробуйте передать publicId в функцию навигации как часть URL, например this._router.navigate([res.publicId])

...