Question

我尝试创建一些example

我如何编写updateStepData方法，如果获取类型为stepOneData的数据，则将更改stepOneData 如果获取类型为stepOneData的数据，将更改stepTwoData吗？

  updateStepData(data: StepOneData | StepTwoData): void {
     Object.keys(data).map(key => {
       // if (data instanceof StepOneData) {
          this.stepOneData[key] = data[key];
       // } 

       // if (data instanceof StepTwoData) {
          this.stepTwoData[key] = data[key];
       // } 
     });
  }

我尝试使用instanceof运算符，但在这里不起作用。

Answer 1

我在您的Step1Component中找到了此方法：

onFormChanges(): void {
    this.stepOneForm.valueChanges
      .subscribe((data: StepOneData) => {

        this.registrationService.updateStepData(data);
      });
}

像这样更改它：

onFormChanges(): void {
    this.stepOneForm.valueChanges
      .subscribe((data: StepOneData) => {

        const stepOneData = new StepOneData();

        stepOneData.firstName = data.firstName;
        stepOneData.firstName = data.lastName;      

        this.registrationService.updateStepData(stepOneData);
      });
}

对您的Step2Component进行相同操作

现在您可以使用您在代码中编写的instanceof了：

   if (data instanceof StepOneData) {
    this.stepOneData[key] = data[key];
  } 

  if (data instanceof StepTwoData) {
     this.stepTwoData[key] = data[key];
  }

=======================================

要使代码可读，您可以将constrcutor添加到您的StepOneData和StepTwoData类中，以初始化其属性，如下所示：

export class StepTwoData {

  constructor(public city:string,public state:string){}

}

以及您的组件中：

 onFormChanges(): void {
    this.stepTwoForm.valueChanges
      .subscribe((data: StepTwoData) => {

        const stepTwoData= new StepTwoData(data.city,data.state);    

        this.registrationService.updateStepData(stepTwoData);
      });
}

=========================

更新：

为了更好的设计，我建议您为每种类型编写两种方法。例如“ UpdateStepOneData”和“ UpdateStepTwoData”。

，如果这些方法中存在共享逻辑，则将其放在名为“ UpdateStepData”的方法中。

UpdateStepOneData(data:StepOneData){

       // Custom Code goes here

       UpdateStepData(...); // Shared Logic goes here

}

UpdateStepTwoData(data:StepTwoData){

       // Custom Code goes here

       UpdateStepData(...); // Shared Logic goes here

}

如何创建多态方法Javascript？

1 个答案: