哪里是在 Angular 中捕获路由参数的最佳位置

Question

I have this layout

Each time I select a project in sidenav component I must show the relational data of that selected project in the maincontent component

The issue is that I have this in sidenav

that is, each selected project goes to a new route, so in the maincontent component I get the params of this route in ngOnInit

ngOnInit(): void {
let id=this.route.snapshot.paramMap.get('id');

But this code only executes once when I select another project this code does not execute.

Answer 1

Add a subscription to your component (I guess, PlanificadorComponent or similar), subscriping ActivatedRoute :

private subscription: Subscription;
id: string;

constructor(private route: ActivatedRoute) {
}

ngOnInit(): void {
  this.subscription = this.route.params.subscribe(params => {
    this.id = params.id;
  });
}

ngOnDestroy(): void {
  if (this.subscription) {
    this.subscription.unsubscribe();
  }
}

See also Getting route information :

Often, as a user navigates your application, you want to pass information from one component to another. For example, consider an application that displays a shopping list of grocery items. Each item in the list has a unique id. To edit an item, users click an Edit button, which opens an EditGroceryItem component. You want that component to retrieve the id for the grocery item so it can display the right information to the user.

You can use a route to pass this type of information to your application components. To do so, you use the ActivatedRoute interface.

That seems to match your requirement. There is also a step by step guide provided.

Answer 2

The problem using snapshot is that this method only executes once in ngOnInit when the component is initialized.

To watch any changes in param routes the option is using an Observable with parmMap

ngOnInit(){
this.route.paramMap.subscribe(
  params => {
    const id = params.get('id');

    console.log('MainContent:Proyecto Seleccionado: ', id);

    this.dataService.getDatosCabeceraProyecto(id)
    .subscribe(
      (data:Proyecto)=>this.proyecto=data,
      (err:any)=>console.log(err),
      ()=>console.log('MainContent: datos de proyecto recogidos')
    );
 }