从 Angular 中的单击事件将对象加载到表单中 2

Question

我是 angular 2 的新手；我正在使用打字稿对组件进行编程，我有一个 "product" 对象，在该对象登陆网站后，用户会看到所有产品的列表（JSON 数据来自 RESTful 端点） .如果该用户单击列表中的一个产品，它将把他们带到一个 "edit" 页面，该页面的所有详细信息都填充到表单字段中，供用户编辑。我的问题是，如何在 angular 2 中对此进行编程？我在网上看到的大多数示例都在与视图相同的页面（组件）上进行编辑。

我的项目结构：
- 产品（型号）
- product.service (service) --> 从RESTful端点获取数据
- product.component (组件) --> 加载所有产品并显示在列表
- edit.component (component) --> 显示所选产品的所有数据，也使用 HTML
- 使用 angular 2 版本 4

我正在考虑使用端点（例如 /api/product?id=xxx），但需要知道如何从 product.component

谢谢！

Answer 1

恕我直言，按照您的建议使用端点是正确的方法。为此需要几个步骤。

定义一个带id参数的路由

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

2。在 ProductComponent 中单击时调用正确的路由

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

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

3。从 EditProductComponent 中的路由中检索 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
  }
}

从 Angular 中的单击事件将对象加载到表单中 2

Load Object into Form from Click Event in Angular 2

typescript

angular-routing

angular2-forms

angular-reactive-forms