Typescript 从Angular 2中的单击事件将对象加载到窗体中

我对angular 2不熟悉；我使用typescript对组件进行编程，我有一个“product”对象，在登录到网站时，用户会看到所有产品的列表（来自RESTful端点的JSON数据）。如果该用户单击列表中的一个产品，则会将其带到“编辑”页面，在该页面中，该产品的所有详细信息将填充到表单字段中，供用户编辑。我的问题是，如何在angular 2中编程？我在网上看到的大多数示例都在与视图相同的页面（组件）上进行编辑

• 我的项目结构：
  • 产品（型号）
  • product.service（服务）-->从RESTful端点获取数据
  • 产品组件（组件）-->加载所有产品并显示在列表中
  • 编辑.component（组件）-->显示所选产品的所有数据，也使用HTML中的反应式表单控件
  • 使用angular 2版本4

我正在考虑使用端点（例如/api/product？id=xxx），但需要知道如何从product.component的选择中传递产品id的参数

---

谢谢

按照您的建议使用端点是正确的方法。 这方面需要采取的步骤很少

使用id参数定义路由

const routes:routes=[
{path:'products'，component:ProductComponent}，
{path:'products/：id'，component:EditProductComponent}
];

二,。在ProductComponent中单击调用正确的路由

三,。从EditProductComponent中的路由检索id

---

我从这里的另一个问题中看到了类似的东西：（是的，我知道链接不是最好的）。本质上说它是@RouteConfig（[{component:MainComponent，path:“/：id”}]），然后是this.router.navigate（['../Main'，{id:2}]）；，然后导出类MainComponent{constructor（params:RouteParams）{let value:any=params.get（“id”）；}}-->谢谢Vlado Tesanovic

constructor(private router: Router, private service: ProductService) {}

onClick(id: number) {
   this.router.navigate(['products', id]);
}

constructor(private activatedRoute: ActivatedRoute, 
    private service: ProductService) {}

ngOnInit() {
  const id = this.activatedRoute.snapshot.params['id'];
  if (id) {
     // get product data by calling endpoint with provided id
     // e.g. this.service.getProduct(id).subscribe...
  } else {
    // throw some notification to user
  }
}