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将自动处理所有事件发送器以及您要处理的数据传递。

如何将数据传递到Angular 8中的嵌套组件？

2 个答案: