我如何在 Angular 2+ 中做摘要组件

Question

我正在尝试创建一个组件来汇总其他组件的内容，但我不知道如何正确执行此操作。

如果有更合适的方法，请让我知道而不是解决这个问题。 蒂亚！

现在，我试图通过通过@Input 将其他组件传递给摘要组件来创建它，但它没有通过，这是我的代码：

这是应用程序

步进器.html

<mat-horizontal-stepper>

  <mat-step [stepControl]="breakdownsGroup">
    <form [formGroup]="breakdownsGroup">
      <ng-template matStepLabel>Breakdowns</ng-template>
      <app-breakdowns formArrayName="breakdowns"></app-breakdowns>
    </form>
  </mat-step>

  <mat-step [stepControl]="summaryGroup">
    <form [formGroup]="summaryGroup">
      <ng-template matStepLabel>Summary</ng-template>
      <app-summary [breakdowns]="breakdowns"></app-summary>
    </form>
  </mat-step>

</mat-horizontal-stepper>

stepper.ts

import { Component, OnInit } from '@angular/core';
import {FormBuilder, FormGroup, Validators, FormArray, FormControl} from '@angular/forms';
import { format } from 'url';

@Component({
  selector: 'app-stepper',
  templateUrl: './stepper.component.html',
  styleUrls: ['./stepper.component.css']
})
export class StepperComponent implements OnInit {

  isLinear = false;

  remarksGroup: FormGroup;
  breakdownsGroup: FormGroup;
  summaryGroup: FormGroup;

  constructor(private _formBuilder: FormBuilder) {
    this.breakdownsGroup = this._formBuilder.group({
      breakdowns: this._formBuilder.array([])
    })
    this.summaryGroup = this._formBuilder.group({
      summary: this._formBuilder.array([])
    })
  }

  ngOnInit() {
  }
}

摘要.ts

import { Component, OnInit, Input, OnChanges } from '@angular/core';
import { FormArray } from '@angular/forms';

@Component({
  selector: 'app-summary',
  templateUrl: './summary.component.html',
  styleUrls: ['./summary.component.css']
})
export class SummaryComponent implements OnChanges {
  @Input() remarks;
  @Input() breakdowns;

  ngOnChanges() {
  }
  showBreakdowns(){
    console.log(this.breakdowns)
  }
}

Answer 1

这里的问题在于stepper.html中的<app-summary [breakdowns]="breakdowns"></app-summary> stepper.html 。 这实际工作的方式如下：

[ summary.ts 中名为'breakdowns' 的TS 变量] = " stepper.ts 中名为'breakdowns' 的TS 变量"

您可能会注意到stepper.ts实际上并没有一个称为breakdown的类级变量。 然而，有一个变量breakdownsGroup ，其中包含名称为breakdown的 FormArray。 所以真的，为了给stepper.html一些它可以识别的东西，我们想要传递到上面一行的右侧的是：

<app-summary [breakdowns]="breakdownsGroup?.controls?.breakdown?.value"></app-summary>

实现相同目的的更优雅的方法是在您的打字稿中使用别名get函数来引用您感兴趣的表单控件。然后您可以使用此别名来缩短 HTML 中的代码，如下所示：

stepper.ts

get breakdowns() {
  return this.breakdownsGroup.get('breakdowns')
}

步进器.html

<app-summary [breakdowns]="breakdowns?.value"></app-summary>

您现在应该能够从summary.ts访问breakdowns FormArray 的内容。

但是请注意， stepper.ts目前没有分配或修改breakdownsGroup或breakdowns FormArray 的逻辑，因此您只会将初始化的空白数组传递给summary.ts