Использование ActivatedRoute для загрузки данных при возврате к компоненту в приложении Angular - PullRequest
Новая
       31

Использование ActivatedRoute для загрузки данных при возврате к компоненту в приложении Angular

0 голосов
/ 25 сентября 2018

Я пытаюсь получить activRoute в своем приложении Angular, чтобы я мог загрузить его в ловушку жизненного цикла onInit, чтобы, когда пользователь возвращается к компоненту, компонент загружался с состоянием URL, когда онипоследний оставил это.

Я уже импортировал activRoute и добавляю его в конструктор: 

constructor(private route: ActivatedRoute) {}

Затем, в onOnit, просто чтобы посмотреть, что у меня есть, я попробовал это:

console.log ('route info:', this.route.queryParams);

Я получаю behavior subject, поэтому я пытаюсь добавить это: 

console.log('route info: ', this.route.queryParams.toArray().subscribe());

Это сейчасвозвращает subscriber.

В нижней строке, я хочу, чтобы была возможность захватить текущую строку URL / запроса и загрузить ее в ngOnInit.Примерно так: 

ngOnInit() {
  this.loadData();
}

loadData() {
  this.route.queryParams;
}

Это выглядит близко?Как я могу на самом деле заставить компонент использовать activRoute для загрузки того, что находится в строке URL / запроса?

ОБНОВЛЕНИЕ: После предложения ниже, я думаю, это может выглядеть примерно так? 

ngOnInit() {
    this.loadData();
}

loadData() {
    let currentRoute = this.route.params.subscribe(params => {
        // logic goes here
        console.log(params['firstName']);
        return params;
      });
    this.router.navigate([currentRoute]);
}

ОБНОВЛЕНИЕ 2:

Если я сделаю это: 

ngOnInit() {
    this.activatedRoute.params.subscribe((params: Params) => {
        let myParams = params;
        console.log(myParams);
      });
}

Я получу это обратно в консоли: 

{pn_firstName.e: "1", pn_firstName.v: "John"}

И это то, что мой URL/ строка запроса выглядит так: 

http://localhost:4200/consulting;pn_firstName.e=1;pn_firstName.v=John

Так что, похоже, она получает строку запроса из того, что я вижу в консоли.

Итак, нижняя строка, это загрузиттекущее состояние строки URL / запроса при загрузке компонента? 

ngOnInit() {
    let currentRoute = this.activatedRoute.params.subscribe((params: Params) => {
        let myParams = params;
        console.log(myParams);
        return myParams;
    });
    this.router.navigate([currentRoute]);
}

Очевидно, нет, потому что это то, что я получаю для URL при загрузке компонента: 

http://localhost:4200/consulting;closed=false;_parent=null;_parents=null;_subscriptions=%5Bobject%20Object%5D;syncErrorValue=null;syncErrorThrown=false;syncErrorThrowable=false;isStopped=false;destination=%5Bobject%20Object%5D

Ответы [ 3 ]

0 голосов
/ 25 сентября 2018

Вы можете использовать snapshot для route

this.route.snapshot - если вы не хотите использовать subscriber как this.route.params.subscribe

то же самое для queryParams - он доступен через snapshot

0 голосов
/ 25 сентября 2018

Если вы ищете что-то, чтобы перезагрузить текущий маршрут без потери параметров, вы можете попробовать следующую стратегию

На конструкторе вашего компонента 

constructor(private router:Router){
    this.router.routeReuseStrategy.shouldReuseRoute = function(){
            return false;
     } }

И перезагрузить на тот же маршрут, что и выв настоящее время. Из свойства URL вы получите полный URL 

this.router.navigated = false;
      this.router.navigate([this.router.url]);

Другой подход

создайте метод 

redirectTo(uri) {
    this.router.navigateByUrl('/', {skipLocationChange: true}).then(() =>
    this.router.navigate([uri]));
  }

И вызовитетак же, как показано ниже 

 this.redirectTo(this.router.url);
0 голосов
/ 25 сентября 2018

Ваш loadData() может выглядеть следующим образом: 

this.route.params.subscribe(params => {
  // logic goes here
  console.log(params['id']); // example 
});
...