从父组件角度读取输入元素值答案

【问题标题】：Angular reading input element value from parent component从父组件角度读取输入元素值
【发布时间】：2018-04-13 19:25:09
【问题描述】：

我有一个简单的组件，其模板由两个日期选择器和一个名为“app-date-adapter”的选择器组成

<mat-form-field>
 <input matInput [matDatepicker]="picker" placeholder="Choose a date" 
    #fromDate>
 <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
 <mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<mat-form-field>
  <input matInput [matDatepicker]="picker2" placeholder="Choose a date" 
 #toDate>
 <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
 <mat-datepicker #picker2></mat-datepicker>
</mat-form-field>

这个组件有一个选择器，我在另一个组件模板（我称之为父组件）中包含了选择器，它有这个按钮

 <app-date-adapter ></app-date-adapter>
 <button class="btn-primary" type="button" class="btn btn-info" (click)="dateRange(fromDate.value, toDate.value)">Filter My Date</button>

它不起作用，并且无法识别 fromDate 和 toDate 元素，就像我将它们全部放在一个模板中一样，它就起作用了。我真的需要事件绑定和所有这些来从子模板中获取这些输入值吗？！没有比这更简单的方法了吗？

【问题讨论】：

标签： angular components parent-child

【解决方案1】：

尚未针对您的情况对此进行测试，但我认为这应该适合您。

在您的子组件类中，

import { ViewChild, ElementRef } from '@angular/core';

@ViewChild('fromDate') fromDate: ElementRef;
@ViewChild('toDate') toDate: ElementRef;

在您的父模板中，

<app-date-adapter #appDateAdapter></app-date-adapter>
<button class="btn-primary" type="button" class="btn btn-info" (click)="dateRange(appDateAdapter?.fromDate?.nativeElement?.value, appDateAdapter?.toDate?.nativeElement?.value)">Filter My Date</button>

试试看它是否有效。希望对您有所帮助。

【讨论】：