Как я могу сделать резюме компонентов в Angular 2+ - PullRequest
Новая
       4

Как я могу сделать резюме компонентов в Angular 2+

0 голосов
/ 26 марта 2020

Я пытаюсь создать компонент, который будет суммировать содержимое других компонентов, но я не знаю, как правильно это сделать.

если есть более правильный путь, пожалуйста, дайте мне знать, а не решать этот. TIA!

На данный момент я пытаюсь создать это, передавая другие компоненты в итоговый компонент через @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() {
  }
}

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

1 Ответ

0 голосов
/ 26 марта 2020

Проблема здесь в строке <app-summary [breakdowns]="breakdowns"></app-summary> в stepper.html. На самом деле это работает следующим образом:

[ переменная TS с именем 'breakdowns' в summary.ts ] = " переменная TS с именем 'breakdowns' в stepper.ts"

Вы можете заметить, что в действительности нет переменной уровня класса с именем breakdown в stepper.ts. Тем не менее, существует переменная breakdownsGroup, которая содержит в себе FormArray с именем breakdown. Так что на самом деле, чтобы дать 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>

Теперь вы сможете получить доступ к содержимому breakdowns FormArray из summary.ts.

Обратите внимание, однако, что в настоящее время нет логинов c в stepper.ts, которые бы ни назначали, ни изменяли breakdownsGroup или breakdowns FormArray, поэтому вы будет иметь только инициализированный пустой массив, переданный в summary.ts

...