我如何在 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