2

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

<mat-card>
    <mat-horizontal-stepper [linear]="isLinear" labelPosition="bottom" #stepper>
    
    <!-- Step-1 -->
    <mat-step [stepControl]="firstFormGroup">
       <ng-template matStepLabel>Select Items</ng-template>
       <select-item-component>
       <select-item-component>
       <div class="mt-5">
          <button mat-flat-button color="primary" matStepperNext>Next</button>
       </div>
    </mat-step>
    
    <!-- Step-2 -->
    <mat-step [stepControl]="firstFormGroup">
       <ng-template matStepLabel>Add Quantity</ng-template>
       <add-qty-component>
       <add-qty-component>
       <div class="mt-5">
          <button mat-flat-button color="primary" matStepperNext>Next</button>
       </div>
    </mat-step>
    
    <!-- Step-3 -->
    <mat-step [stepControl]="firstFormGroup">
       <ng-template matStepLabel>Conform</ng-template>
       <conform-step-component>
       <conform-step-component>
       <div class="mt-5">
          <button mat-flat-button color="primary" matStepperNext>Done</button>
       </div>
    </mat-step>
    </mat-horizontal-stepper>
 </mat-card>

步骤 1 显示项目的多选列表，并将所选项目列表传递到下一个步骤 2，并在步骤 2 中添加每个项目的数量。

如何在下一步单击从步骤 1 到步骤 2 传递所选项目并显示传递的项目以在步骤 2 中输入数量？

我创建了一个通用服务层来设置和获取选定的项目。ngOnInit步骤 2 的组件试图从公共服务中获取所选列表，但问题是组件 2 在下次单击之前已经启动。

在步骤1中单击下一步后可以初始化或重新初始化第二个组件吗？

从步骤 1 移动后，如何在步骤 2 中显示所选项目列表？

对于上述情况，最好的方法是什么？

只是指向可以回答我的问题的任何参考的链接，就足够了。

谢谢你。

4

4 回答 4

5

要使组件输出值，请使用@Output。

要使用来自组件外部的数据，请使用@Input。

因为我不知道我将ItemType在此示例中使用的项目类型。

选择项目组件

在 select-item-component 中，声明一个属性：

@Output() onDataChange: EventEmitter<ItemType> = new EventEmitter();

and when the select changes, just do

this.onDataChange.emit(formValue);

添加数量组件

@Input() item: ItemType;

如果您想在值更改时触发某些操作，请使用set. 例如：

@Input() set item(value: ItemType) {
  this.loadOptions(value);
}

你可以在select-item-componentwithselect1和select2变量中做同样的事情。

父母

使用输出和输入值。

...
<select-item-component (onDataChange)="select1 = $event"></select-item-component>
<select-item-component (onDataChange)="select2 = $event"></select-item-component>

...

<add-qty-component [item]="select1"></add-qty-component>
<add-qty-component [item]="select2"></add-qty-component>
...
于 2020-03-09T15:37:29.023 回答
4

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

@Output 装饰器可以在子组件（stepper 1）中使用，将数据传输到其父组件。

@input 装饰器可用于将数据从父组件发送到子组件（步骤 2）。

你可以在这里阅读更多关于它的信息。

于 2020-03-05T18:54:57.740 回答
1

您可以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>

你的Step1组件应该看起来像

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

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

堆栈闪电战

于 2020-03-06T01:45:15.333 回答
0

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

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

然后在下一个组件中，订阅您的主题并将您的本地变量设置为该数据。

this.sharedService.$itemsAdded.subscribe(items => {
  this.items = items.map(x => mapItem());
});
于 2020-03-05T19:15:56.357 回答