将路由参数传递给组件

Posted 2023-02-23

【中文标题】将路由参数传递给组件

【英文标题】：Pass router paramters to component

【发布时间】：2020-02-06 04:39:26

【问题描述】：

在我的 Angular 网站的 mainComponent 中，我以这种方式读取了 url 参数：

  constructor(private activatedRoute: ActivatedRoute) 

ngOnInit() 
   this.activatedRoute.params.subscribe(params => 
   const id = params['id'];
   console.log(id);
);
  

这是我设置路由的方式：

const routes: Routes = [
 path: 'contatti', component: ContattiComponent ,
 path: 'main/:id', component: MainComponent 
];

如何将“id”传递给contactComponent？

【参考方案1】：

如果我理解正确，从您的路由中读取路由器参数可以这样完成：

constructor( private router: Router)


someId: any;


ngOnInit()
  this.route.params
        .subscribe( (data: any) => this.someId = data.id //<-- here is your id);

    

更新

关于您的组件结构的信息很少。因此，让我们假设您的主要组件包含其他组件的模板

然后通过您的模板，您可以将 id 传递给其他组件：

<contatti-component
 [myId]="someId">
</contatti-component>

【讨论】：

不，我想将 ManinComponent 中读取的参数从 ManinComponent 传递给 ContactComponent

@Francesco 让我再次咬紧牙关......我希望这次我猜对了你需要什么

不，主组件不包含ContactComponent，它们不相关

@dalarzo 我不能像全局变量一样存储“id”然后从联系人组件中读取它吗？