0

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

  • 我的项目结构：
    • 产品（型号）
    • product.service ( service ) --> 从 RESTful 端点获取数据
    • product.component ( component ) --> 加载所有产品并显示在列表中
    • edit.component ( component ) --> 显示来自所选产品的所有数据，还使用​​HTML 中的响应式表单控件
    • 使用角度 2 版本 4

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

谢谢！

4

1 回答 1

2

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

  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
  }
}
于 2017-06-14T09:39:45.157 回答