组件之间的Angular 7服务通信 [英] Angular 7 service communication between components

问题描述

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

I'm creating wizard with steps. I have two components which has no parent-child relationship:

1. 具有提交按钮的页脚组件，该组件将重定向到下一步.
2. 对某些输入进行验证的表单组件.

我还创建了一个服务，用于上述两个组件之间的通信.

I created also a service for communication between those 2 components above.

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

What I want to achieve is to invoke method on footer submit button which will check if form from component number 2 is valid. If yes, we can go to next step, if not, I need to invoke validation errors, without going to next step, until user pass some information to inputs on form.

我不确定该如何实现.有什么想法吗?谢谢.

I'm not sure how can I achieve this. Any thoughts? Thank you.

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

I have tried to invoke validation on button but in the same form component. It works as expected. Now I would like to invoke this method on submit button in the footer.

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

This is my onSubmitStep() method in footer component:

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

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

This is what I have in my form component:

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]
    });
}

推荐答案

注释的补充(请参见基于您的

complementary the comment (see a simple stackblitz based in yours stackblitz

以您的form.component

in your 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()
  }

在页脚组件中

  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"})并将其标记为可观察对象.可观察的是谁管理了当前的步骤

See that the button make a callComponentMethod({command:"check"}) and susbcribe to the observable. Is the observable who mannage currentStep

表单使用命令"侦听对象，如果表单有效或无效，则将其发送到callComponentMethod

The form listen for an object with "command", and send to callComponentMethod if the form is valid or not

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

updated: a simple aproach if the form.component and footer.component belong to the same <router-outlet> (*) is using Input

如果主要成分是

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

页脚输入表单.

@Input('form') form

我们可以简单地

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

请参见新的stackblitz

(*)我想说的是，如果我们有类似的话，这是无效的

(*)I want to say that this aproach it's not valid if we has some like

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

这篇关于组件之间的Angular 7服务通信的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！