时间戳

首页 > 解决方案 > 将路由器参数传递给组件

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？

标签： angularparameterscomponentsrouter

解决方案

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

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>

推荐阅读