Angular：从向导的不同步骤获取数据答案

【问题标题】：Angular: Obtain data from different steps of a wizardAngular：从向导的不同步骤获取数据
【发布时间】：2017-12-23 05:50:54
【问题描述】：

假设我们有一个 3 步向导。

我想知道是否有任何解决方案可以将 Step1 和 Step2 填充的数据显示到 Step3 中。

每个步骤都是不同的组件。我知道 Step3 必须获得两个输入。我的问题是，如何将数据发送到 Step1 和 Step2 上的 Step3 组件？

任何建议将不胜感激！

谢谢！

【问题讨论】：

您可以使用来自不同组件的共享服务。
是的，我正在考虑这样的事情，但如果存在其他解决方案，我想看看！谢谢
我认为没有更简单的方法可以做到这一点。组件交互可以概括为共享服务、输入绑定（在您的情况下，我认为您无法实现）和 ViewChild 绑定，这比简单的服务更难实现。

标签： angular events components wizard

【解决方案1】：

使用共享服务，您可以轻松实现这一目标。

不要忘记正确设置上述服务的提供者。

wizard.service.ts

import { Injectable } from '@angular/core';

@Injectable()
export class WizardService{

  constructor() { }

  public void setStep1(){ /*do something*/ }
  public void setStep2(){ /*do something*/ }
  public void setStep3(){ /*do something*/ }

}

step1.component.ts

import { Component } from '@angular/core';
import { WizardService} from './wizard.service.ts';

@Component({
  ...
})

export class Step1Component

  constructor(private wizardService: WizarService) { }

  onClick(){
    this.wizarService.setStep1();
  }
}

【讨论】：