Javascript 将数据传递到基于组件的mat stepper中的下一步

我使用一个基于组件的mat stepper组件来显示线性过程。每个步骤都有自己的组件，如下所示

选择项目 下一个 增加数量 下一个 符合 多恩

---

您可以使用@Output和@Input装饰符的组合

@输出装饰器可在子组件步进器1中用于将数据传输到其父组件

@输入装饰器可用于将该数据从父组件发送到子组件步进器2

---

您可以阅读更多信息。

另一种选择是使用共享服务。我将在服务上使用一个主题，并在更改数据的组件中调用next，在下一次调用中传递新数据

public $itemsAdded: Subject<Item> = new Subject<Item>();

您可以将ControlContainer用于同样的目的，它允许您访问子组件和父组件中的表单控件

<button mat-raised-button (click)="isLinear = !isLinear" id="toggle-linear">
  {{!isLinear ? 'Enable linear mode' : 'Disable linear mode'}}
</button>
<mat-horizontal-stepper [linear]="isLinear" #stepper>
  <mat-step [stepControl]="firstFormGroup">
    <form [formGroup]="firstFormGroup">
      <ng-template matStepLabel>Fill out your name</ng-template>
     <step1></step1>
      <div>
        <button mat-button matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>
  <mat-step [stepControl]="secondFormGroup">
    <form [formGroup]="secondFormGroup">
      <ng-template matStepLabel>Fill out your address</ng-template>
      <step2></step2>
      <div>
        <button mat-button matStepperPrevious>Back</button>
        <button mat-button matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>
</mat-horizontal-stepper>

您的Step2组件将如下所示

import {Component, OnInit} from '@angular/core';
import {ControlContainer, FormGroup, Validators} from '@angular/forms';

/**
 * @title Stepper overview
 */
@Component({
  selector: 'step2',
  template:`
  <form [formGroup]="form"> 
    <mat-form-field>
        <mat-label>Address</mat-label>
        <input matInput formControlName="secondCtrl" placeholder="Ex. 1 Main St, New York, NY"
               required>
      </mat-form-field>
  </form>
  `
})
export class Step2 implements OnInit {
  form: FormGroup;

  constructor(private controlContainer:ControlContainer) {}

  ngOnInit() {
   this.form=<FormGroup>this.controlContainer.control;
   this.form.valueChanges.subscribe(data=>console.log(data));
  }
}

---

要使组件输出值，请使用

要使用组件外部的数据，请使用

因为我不知道您的项目的类型，所以在本例中我将使用ItemType

选择项目组件 在“选择项”组件中，声明一个属性：

@输出onDataChange:EventEmitter=新的EventEmitter； 当“选择”更改时，只需执行以下操作

this.onDataChange.emitformValue； 添加数量组件 @输入项：ItemType； 如果要在值更改时触发某些操作，请使用set。例如：

@输入集itemvalue:ItemType{ 此.loadoptions值； } 您可以使用select1和select2变量在selectitem组件中执行相同的操作

父母亲 使用输出和输入值

... ... ...

---

为了防止不必要的行为，您应该使用replaySubject或behaviorSubject。如果不是这样的话，就很容易在$itemsAdded上调用next并在之后订阅该主题。对于行为主体，您不应该有此问题。如果您没有*主题的初始值，可以像这样使用replaySubject:public$itemsAdded:replaySubject=new replaySubject 1您还在寻找解决方案还是找到了解决方案？？

import {Component, OnInit} from '@angular/core';
import {ControlContainer, FormGroup, Validators} from '@angular/forms';


@Component({
  selector: 'step1',
  template:`
  <form [formGroup]="form"> 
   <mat-form-field>
        <mat-label>Name</mat-label>
        <input matInput placeholder="Last name, First name" formControlName="firstCtrl" required>
      </mat-form-field>
  </form>
  `
})
export class Step1 implements OnInit {
  isLinear = false;
  form: FormGroup;

  constructor(private controlContainer:ControlContainer) {}

  ngOnInit() {
   this.form=<FormGroup>this.controlContainer.control;
   this.form.valueChanges.subscribe(data=>console.log(data));
  }
}

import {Component, OnInit} from '@angular/core';
import {ControlContainer, FormGroup, Validators} from '@angular/forms';

/**
 * @title Stepper overview
 */
@Component({
  selector: 'step2',
  template:`
  <form [formGroup]="form"> 
    <mat-form-field>
        <mat-label>Address</mat-label>
        <input matInput formControlName="secondCtrl" placeholder="Ex. 1 Main St, New York, NY"
               required>
      </mat-form-field>
  </form>
  `
})
export class Step2 implements OnInit {
  form: FormGroup;

  constructor(private controlContainer:ControlContainer) {}

  ngOnInit() {
   this.form=<FormGroup>this.controlContainer.control;
   this.form.valueChanges.subscribe(data=>console.log(data));
  }
}