удаление URL в index.html, но как я могу получить их в app.component.ts

Question

Я удалил параметры запроса из URL в index.html, но я хочу, чтобы app.component.html работал с этими параметрами запроса, а мои app.component.ts использовали ActivatedRoute. Теперь, когда у меня есть этот сценарий в index.html,Мой app.componen.ts также не получает эти параметры queru, как я могу позволить app.component.ts иметь мои параметры запроса?

это мой скрипт в моем index.html для удаления параметров запроса:

    <script type="text/javascript">
    var url = window.location.toString();
   if(url.indexOf("?") > 0) {
      var sanitizedUrl = url.substring(0, url.indexOf("?"));
      window.history.replaceState({}, document.title, sanitizedUrl);
    }
  </script>

и это мой запрос от app.component.ts к парсам запроса:

import {ApiService} from './api.service';
import {Component, OnInit} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {Converter} from './converter';
import {Title} from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  username = '';
  department = '';

   json;
  constructor(
    private feedbackService: ApiService,
    private titleService: Title,
     private route: ActivatedRoute
    ) {
  }

  ngOnInit() {
    this.route.queryParams.subscribe(params => {
      if (params.hasOwnProperty('username')) {
        this.username = params['username'];
      }     
      if (params.hasOwnProperty('department')) {
        this.department = params['department'];
      }     
    });
  }

Answer 1

Не могли бы вы не просто поместить эти параметры запроса в хранилище сеансов, а затем получить доступ к хранилищу сеансов внутри app.component.ts?

  <script type="text/javascript">
    var url = window.location.toString();
   if(url.indexOf("?") > 0) {
      var [ sanitizedUrl, queryParams ] = url.split('?')
      window.history.replaceState({}, document.title, sanitizedUrl);
      sessionStorage.setItem('params', queryParams)
    }
  </script>

//app.component.ts

export class AppComponent implements OnInit {
  username = '';
  department = '';

   json;
  constructor(
    private feedbackService: ApiService,
    private titleService: Title,
     private route: ActivatedRoute
    ) {
  }

  ngOnInit() {
    let params = sessionStorage.getItem('params');
    // parse params logic here // 

    if (params.hasOwnProperty('username')) {
        this.username = params['username'];
      }     
      if (params.hasOwnProperty('department')) {
        this.department = params['department'];
      }     

    };
  }

Answer 2

После некоторого исследования не существует четкого решения для него, но все же мне удалось создать какое-то решение, которое должно работать.

Идея, лежащая в основе этого, состоит в том, чтобы сохранить параметры запроса в обслуживании,

Создайте сервис, который будет хранить данные:

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class SampleService {
  data: BehaviorSubject<any> = new BehaviorSubject({});
  data$: Observable<any> = this.data.asObservable();
}

впоследствии, в вашем app.component.ts

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

  ngOnInit(): void {
    this.sampleService.data$.subscribe(console.log);
    this.activatedRoute.queryParams.subscribe((data: {username: string, departure: string}) => {
      if(data.hasOwnProperty('username') || data.hasOwnProperty('departure')) {
        this.sampleService.data.next(data);
      }
      setTimeout(() => { // note this timeout is mandatory and it makes this kinda cheatfix the whole thing
        this.router.navigateByUrl('/');
      });
    });
  }

таким образом вы получите ваши параметрыхранится в теме поведения данных SampleService.Если вы хотите использовать его где-нибудь, все, что вам нужно сделать, это ввести сервис и подписаться на data$.

Обратите внимание, что это решение содержит несколько подписок, с которыми следует обращаться осторожно, но не в теме этого вопроса.

Небольшую короткую демонстрацию можно найти здесь .Проверьте демонстрационную консоль при открытии приложения stackblitz с queryParams как /?username=foo.