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

Posted 2023-03-13

【中文标题】在 Angular 中捕获路由参数的最佳位置在哪里

【英文标题】：where is the best place to capture params of routes in Angular

【发布时间】：2021-05-07 14:08:08

【问题描述】：

我有这个布局

每次我在 sidenav 组件中选择一个项目时，我都必须在 maincontent 组件中显示该所选项目的关系数据

问题是我在 sidenav 中有这个

也就是说，每个选定的项目都会去一个新的路由，所以在 maincontent 组件中，我在 ngOnInit 中得到了这个路由的参数

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

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

【参考方案1】：

将subscription 添加到您的组件（我猜是PlanificadorComponent 或类似名称），订阅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：

通常，当用户浏览您的应用程序时，您希望通过 从一个组件到另一个组件的信息。例如，考虑一个 显示杂货购物清单的应用程序。每一个项目 在列表中有一个唯一的 id。要编辑项目，用户单击编辑 按钮，它会打开一个 EditGroceryItem 组件。你想要那个 检索杂货项目的 id 以便显示的组件 向用户提供正确的信息。

您可以使用路由将此类信息传递给您的 应用程序组件。为此，您使用 ActivatedRoute 界面。

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

【参考方案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')
    );