Angular8 中嵌套组件如何传递数据？

Question

在父 html 中，我有很多组件，例如图表 1、2、3、4、5。然后每当我更改日期时，我都想将选定的日期发送到所有组件。下面的代码是父子事件发射器的实现。但是当我检查 <kt-chart1> 组件时，我没有从这个 html 文件中得到任何值？另外，我想知道何时获取数据，以便我可以通过执行函数按日期对图表进行排序。

html

<!-- ----------------------------------------------------------------------- -->
<!--                            date range field                             -->
<!-- ----------------------------------------------------------------------- -->
<div class="row">
    <div class="col-xl-4">
        <mat-form-field class="flex-container">
            <div [formGroup]="form">
                <input
                    matInput
                    placeholder="Choose a date"
                    [satDatepicker]="picker2"
                    formControlName="date"
                    (dateChange)="DateChanged($event)"
                />
            </div>
            <sat-datepicker #picker2 [rangeMode]="true"> </sat-datepicker>
            <sat-datepicker-toggle
                matSuffix
                [for]="picker2"
            ></sat-datepicker-toggle>
        </mat-form-field>
        <div class="col-xl-6 chartPadding">
        <h4 class="text-center">Cost Per Tonne</h4>
        <kt-chart1 (sendingDateEmitter)="receivedDate($event)"></kt-chart1>
        <kt-chart2 (sendingDateEmitter)="receivedDate($event)"></kt-chart2>
        <kt-chart3 (sendingDateEmitter)="receivedDate($event)"></kt-chart3>

    </div>
    </div>
</div>

打字稿

    @Output() sendDateEmitter = new EventEmitter<any>();

    DateChanged($event) {
        this.sendDateEmitter.emit($event.value);

    }

Answer 1

在每个图表中添加

@Input() date: Date;

并将其传递给图表

<kt-chart1 (sendingDateEmitter)="receivedDate($event)" [date]="form.get('date').value"></kt-chart1>
<kt-chart2 (sendingDateEmitter)="receivedDate($event)" [date]="form.get('date').value"></kt-chart2>

确保在渲染之前初始化表单，否则您可能需要执行类似 [date]="form.get('date')?.value"

的操作

要检测图表中的日期变化，请使用 OnChanges

ngOnChanges(changes: SimpleChanges) {
  if (changes.date) {
    // Date has changed, do something with it.
  }
}

Answer 2

为什么不直接声明一个变量并将其绑定到 Child 的输入参数。像这样：

父组件：

parentDate: Date;

DateChanged($event) {
  this.parentDate = $event.value);
}

父组件html：

<kt-chart1 [childDate]="parentDate"></kt-chart1>

子组件

@Input() childDate: Date;

Angular 将自动处理您要执行的所有事件发射器和数据传递。

Angular8 中嵌套组件如何传递数据？

how to pass data to the nested component in Angular 8?

data-binding

angular

angular8