Javascript Angular 2当我们修改表中的当前数据时，如何设置表单生成器或表单组，不确定如何使用routerlink？

我知道我必须使用类似的东西，但问题是在哪里，如何使用

ngOnInit() {
    this.relationForm = this.fb.group({
      relationName: ['', [Validators.required, Validators.minLength(3), Validators.pattern('[a-z]+([A-Z][a-z]*)*')  ]],
      humanFormat: ['', [Validators.required, Validators.minLength(3)]],
      populate: ['', [Validators.required, Validators.pattern('TRUE|FALSE')]],
      visible: ['', [Validators.required, Validators.pattern('TRUE|FALSE')]],
      generalizations: ['', [Validators.required, Validators.minLength(3),Validators.pattern('[a-z]+([A-Z][a-z]*)*') ]],

---

下面是一个简化的代码示例。在迭代数据的地方，有一个单击事件，在该事件中传递所选项目，如下所示：

 this.productForm.patchValue({
            productName: this.product.productName,
            productCode: this.product.productCode,
            starRating: this.product.starRating,
            description: this.product.description
        });
        this.productForm.setControl('tags', this.fb.array(this.product.tags || []));

有了以上内容，我们还需要在构造函数中注入，以便能够使用它：

专用路由器：路由器

我不打算完全解释这项服务，在中有关于这项服务的详细描述。关键是要使用一个可观察的，在这种情况下，我们需要的不是

主题

，因为

主题

需要

next（）

来发出值，而

行为主题

总是会发出，如果有订阅者，更多信息请参见

服务：

modify(relation) {
  this.service.addRelation(relation);
  this.router.navigate(['your path here'])
}

然后，您只需将收到的对象填入表单中的值：

constructor(private service: RelationService, private fb: FormBuilder) {
  service.relation$.subscribe(relation => {
    this.relation = relation;
    this.buildForm();
  });
}

因此，这是一个简化的示例，您可以使用并适应自己的代码

---

最后，这里有一个。

@AJT_82我尝试使用routerLink，但我得到的是空表单，因为它来自不同的组件。我错过了什么！我应该为form builder使用补丁值吗？@AJT_82这是完整的代码哇！再次感谢；）你在Angular:D上有这么一个惊人的命令，我会尝试一下，让你知道，但是如果你看到我的例子，我有一个单独的组件，在其中创建类别表单！我仍在试图理解这将如何适应：）没问题：）单独的组件？嗯，这也是plunker中的一个独立组件（

详细信息

），当您谈论独立组件时，可能我在这里误解了：但是如果你遇到问题，用尽可能少的代码创建一个可以工作的plunker来展示你的问题，然后我很乐意看一看：）relation$=this.relation.asObservable（）为什么在relation的末尾加$？我遇到问题的地方是当我尝试访问导出类DetailComponent{relation={}；relationForm:FormGroup；buildForm（）{this.relationForm=this.fb.group（{categoryName:[this.relation.categoryName]，author:[this.relation.author]}我无法访问this.realtion.categoryName，因为我想我们已经在细节组件中将它声明为空。关系={}我无法在formBuilder功能中设置categoryName！

$

只是一种命名约定，用于在

关系

和可观察的

关系$

之间进行分隔。问题不应该是该关系为空，因为我们在订阅中为关系设置了值后才构建表单。或者这取决于整个订阅ely，细节组件是子组件吗？如果是，则会出现此问题。buildForm（）{this.relationForm=this.fb.group（{//此处我无法访问this.realtion.category categoryName:[this.relation.categoryName]，author:[this.relations.author]}）这是我的代码中唯一没有发生的事情，除了一切都按照您的建议工作之外。我得到错误消息“Property categoryName在类型{}上不存在”。

modify(relation) {
  this.service.addRelation(relation);
  this.router.navigate(['your path here'])
}

private relation = new BehaviorSubject<Object>({})

relation$ = this.relation.asObservable()

addRelation(relation) {
  this.relation.next(relation)
}

constructor(private service: RelationService, private fb: FormBuilder) {
  service.relation$.subscribe(relation => {
    this.relation = relation;
    this.buildForm();
  });
}

buildForm() {
  this.relationForm = this.fb.group({
    categoryName: [this.relation.categoryName],
    author: [this.relation.author]
  });
}