组件之间的Angular 7服务通信

Question

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

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

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

我想要实现的是在页脚提交按钮上调用方法，该方法将检查来自组件编号 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 的简单堆栈闪电战

在你的 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"})
  }

看到按钮调用了一个 callComponentMethod({command:"check"}) 并订阅了 observable。是管理 currentStep 的 observable

表单用“command”监听对象，如果表单有效则发送给callComponentMethod

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

如果主要组件是这样的

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

Out footer 进入一个 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>