Как получить параметры из URL, используя Router или ActivatedRoute в угловых

Question

Я пытаюсь получить параметры из URL в AppComponent в моем угловом приложении.

Но когда я использую ActivatedRoute для получения параметров, он дает ноль. Это моя конфигурация роутера.

  {
    path: '',
    component: HomeComponent,
    canActivate: [AuthGuard]
  },
  {
    path: 'product/:product',
    component: HomeComponent,
    canActivate: [AuthGuard]
  }

Это то, что я пытался в AppComponent, чтобы получить результат params из URL.

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

ngOnInit() {

this.route.params.subscribe(params => {
      console.log(params['product']); //jsut print the result in console
});

//or can use to get the result
//console.log(this.route.snapshot.params['product'];

}

этот код работает только внутри определенных компонентов. Итак, есть ли подходящий способ получить результаты. [Угловой 6 +]

Answer 1

Понял сейчас. Проблема в том, что AppComponent всегда есть и его параметры не обновляются. Если вы подпишетесь на activatedRoute в HomeComponent, вы можете получить обновленное значение. Если требуется получить значение в AppComponent, вы можете следить за ответом @ Chirag, подписавшись в AppCOmponent и обновив значение из HomeComponent. Проверьте раздвоенный код здесь

Answer 2

Сначала создайте sharedService

import { Injectable } from '@angular/core';
import {  Subject  } from 'rxjs';


@Injectable()
export class SharedService {

  myData: Subject<any> = new Subject<any>();

  constructor() {}

  setData(data) {
    this.myData.next(data);
  }
}

Тогда откуда вы хотите установить данные, используйте этот метод:

export class MyComponent implements OnInit {

    constructor(private sharedService: SharedService) { }

    ngOnInit() {
       this.sharedService.setData(data);
    }
}

Тогда в вашем приложении Компонент:

export class AppComponent implements OnInit {

  constructor(private sharedService: SharedService) {
    this.sharedService.myData.subscribe((value) => {
     console.log(value) // Here you will get your complete data
    });
  }

}