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

Question

我有这个布局

每次我 select sidenav 组件中的一个项目，我必须在 maincontent 组件中显示该 selected 项目的关系数据

问题是我在 sidenav 中有这个

也就是说，每个 selected 项目都会走一条新路线，所以在主要内容组件中，我在 ngOnInit

中获得了这条路线的参数

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

但是当我select另一个项目这个代码不执行时，这个代码只执行一次。

Answer 1

添加一个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();
  }
}

另见 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.

这似乎符合您的要求。还提供了分步指南。

Answer 2

使用snapshot的问题是这个方法只在组件初始化时在ngOnInit中执行一次

要观察参数路由的任何变化，该选项使用带有 parmMap 的 Observable

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')
    );
 }

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

where is the best place to capture params of routes in Angular

routes

angular-routing

ngoninit

angular