Angular 7 组件间的服务通信

Question

我正在创建带步骤的向导。我有两个没有父子关系的组件：

带有重定向到下一步的提交按钮的页脚组件。
对某些输入进行验证的表单组件。

我还为上述两个组件之间的通信创建了一个服务。

我想要实现的是在页脚提交按钮上调用方法，该方法将检查组件编号 2 中的表单是否有效。如果是，我们可以进入下一步，如果不是，我需要调用验证错误，而不进入下一步，直到用户将一些信息传递给表单上的输入。

我不确定如何才能做到这一点。有什么想法吗？谢谢。

我试图在按钮上调用验证，但在同一个表单组件中。它按预期工作。现在我想在页脚中的提交按钮上调用此方法。

这是我在页脚组件中的 onSubmitStep() 方法：

public onSubmitStep() {
    if (this.currentStep < this.maxSteps) {
        this.currentStep += 1;
        this.switchStep();
        this.showDefaultFooter = false;
    }
}

这是我的表单组件中的内容：

public contractPropertiesContent: ContractPropertiesInput;
public contractPropertiesForm: FormGroup;

constructor(private fb: FormBuilder, private router: Router, private contractPropertiesService: ContractPropertiesService) {}

ngOnInit() {
    this.contractPropertiesContent = this.contractPropertiesService.getContractPropertiesContent();
    this.contractPropertiesForm = this.initFormGroup();
}

private initFormGroup() {
    return this.fb.group({
        paymentConditionsInput: ['', Validators.required],
        creditDaysInput: ['', Validators.required],
        targetInput: ['', Validators.required]
    });
}

Answer 1

补充评论（查看基于您的评论的简单 stackblitz stackblitz

在你的 form.component

  ngOnInit() {
    this.myService.customObservable
       .pipe(filter((x:any)=>x.command)
       .subscribe(res=>{
         if (res.command=="check")
         {
           this.contractPropertiesForm.updateValueAndValidity();
           this.myService.callComponentMethod({isValid:this.contractPropertiesForm.valid})
         }
    })
    this.contractPropertiesForm=this.initFormGroup()
  }

在你的footer.component

  ngOnInit() {
    this.myService.customObservable
      .pipe(filter(x=>x.isValid!=null))
      .subscribe(res=>{
         if (res.isValid)
         {
            if (this.currentStep < this.maxSteps) {
              this.currentStep += 1;
         }
       }
    })
  }

  public onSubmitStep() {
        this.myService.callComponentMethod({command:"check"})
  }

看到按钮调用了 ComponentMethod({command:"check"}) 并调用了 observable。是管理 currentStep

的可观察对象

表单使用"command"监听一个对象，如果表单有效则发送给callComponentMethod

更新：一个简单的方法 如果 form.component 和 footer.component 属于同一个 <router-outlet> (*) 正在使用输入

如果主要成分像

<app-form #form></app-form>
<app-footer [form]="form"></app-footer>

Out footer get in a Input form.component

@Input('form') form

我们可以简单地

  public onSubmitStep() {
      this.form.contractPropertiesForm.updateValueAndValidity();
      if (this.form.contractPropertiesForm.valid)
          this.currentStep++;
  }

见new stackblitz

(*)我想说如果我们有类似的东西，这个方法是无效的

<router-outlet></router-outlet>
<app-footer ></app-footer>

Angular 7 组件间的服务通信

Angular 7 service communication between components

angular

service

communication