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

Question

I am trying to create a component that will summarize content from other components, but i don't know how to properly do this.

if there is a more proper way, please let me know rather than solving this one. TIA!

For now, I'm trying to create this by passing the other components to the summary component through @Input, but it doesn't get passed, here is my code:

here is the application

stepper.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() {
  }
}

summary.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

The problem here is in the line <app-summary [breakdowns]="breakdowns"></app-summary> in stepper.html . The way this is actually working is as follows:

[ TS variable named 'breakdowns' in summary.ts ] = " TS variable named 'breakdowns' in stepper.ts "

You might notice that there not actually a class-level variable called breakdown in stepper.ts . There is however a variable breakdownsGroup which contains within it a FormArray with the name breakdown . So really, in order to give stepper.html something it recognises, what we want to pass into the right side of the above line is instead:

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

A more elegant way of achieving the same is to use an alias get function in your typescript to reference the form control you are interested in. You can then use this alias to shorten the code in your HTML, like so:

stepper.ts

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

stepper.html

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

You should now be able to access the contents of the breakdowns FormArray from within summary.ts .

Note however, there is currently no logic in stepper.ts which either assigns nor modifies breakdownsGroup or the breakdowns FormArray, therefore you will only have the initialised blank array passed into summary.ts