Question

我有一个简单的组件，其模板包含两个日期选择器和一个名为＆＃39; app-date-adapter＆＃39;

的选择器

<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元素，就好像我将它们全部放在一个模板中然后它起作用。我是否真的需要事件绑定以及从子模板获取这些输入值的所有内容？！没有比这更简单的方法吗？

Answer 1

您可以将其作为@Input传递：

<child-component [myvalue]="value from parent component"></child-component>

ChildComponent.ts

@Input() myvalue;
...
this.myvalue;

Answer 2

没有针对您的情况对此进行测试，但我认为这对您有用。

在您的子组件类中，

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>

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

父组件

2 个答案: