Question

我还在学习Angular编码的输入/输出。

我有2个datePicker字段。我认为“＃”是元素的id。然后我开始调试，发现事实并非如此。

所以我的问题是：在角度世界中，我应该如何确定在dateChanged事件中点击了哪个元素？

如果您看到我将ID添加到每个输入标记，这似乎有效。但是，这是处理此问题的适当方法，还是可以使用ViewChild完成？（看起来有点过分，我必须设置Id和＃才能进行不同类型的操作。）

HTML：

  <mat-form-field>
    <input id="test2" #toInput matInput [matDatepicker]="toDatePicker" placeholder="To Date"
           (dateChange)="dateChanged($event)" disabled>
    <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
    <mat-datepicker #toDatePicker disabled="false"></mat-datepicker>
  </mat-form-field>

打字稿：

  @ViewChild('fromInput', { read: MatInput }) fromInput: MatInput;
  @ViewChild('toInput', { read: MatInput }) toInput: MatInput;

  dateChanged(event: MatDatepickerInputEvent<Date>) {
    console.log("ID: " + event.targetElement.id);            
  };

Answer 1

#字符用于定义模板变量。您可以阅读有关此语法here的更多信息。它与css ID无关。

我们需要定义此变量以查询具有@ViewChild装饰器的元素。它不接受css选择器作为参数。只有模板引用变量或类标记。

<强> component.html

<mat-form-field>
    <input #toInput matInput (dateChange)="onToInputChange($event)" disabled>
 </mat-form-field>
 <mat-form-field>
    <input #fromInput matInput (dateChange)="onFromInputChange($event)" disabled>
 </mat-form-field>

<强> component.ts

onFromInputChange() {
 // do something
}

onToInputChange() {
 // do something
}

Angular：如何确定点击了哪个控件

1 个答案: