Question

我有一个日期选择器组件，我正在尝试使用本地引用访问其值。

但是，当我尝试对它们进行控制台时，本地引用给了我未定义的内容。

按以下顺序提供日期选择器，功能和触发器

使用角度7：

<app-date-picker #startingDate class="col-12 ">
              </app-date-picker>

datesCompare(sDate, eDate){
    console.log(sDate, eDate, '-------dates------')
  }

<input type="text" class="input-box" placeholder="Code" 
 (click)="datesCompare(startingDate, endingDate)">

Answer 1

您可以获得类似的HTML元素：

<app-date-picker #startingDate class="col-12 ">
</app-date-picker>

TypeScript：

@ViewChild('startingDate') startingDate; 

datesCompare(){
    console.log('startingDate:', this.startingDate )
}

Answer 2

您的代码表示您需要自定义日期选择器组件的模板引用。如果确实如此，那么您应该尝试

@ViewChild('startingDate') startingDate;
@ViewChild('endingDate') endingDate;

然后在ngAfterViewInit块中，可以console.log startingDate和endingDate变量以确认它们不是未定义的。这样一来，当您运行datesCompare函数时，它不会同时为两个日期返回undefined。

但是，如果您要在每个日期选择器选择的日期上进行任何计算，则应该使用 @Output 装饰器即，在您的 AppDatePicker 组件中，您可以拥有一个名为 selectedDate 的变量，该变量代表所选日期，而一个发射方 dateSelection 为：

selectedDate: Date;  
@Output()dateSelection = new EventEmitter<Date>{};

然后在您的 AppDatePicker 组件中，选择日期后即可致电

this.dateSelection.emit(this.selected);

在父组件HTML中：

<app-date-picker #startingDate (dateSelection)="getStartingDate($event)" class="col-12 "></app-date-picker>

在父组件TS中：

getDate(event){
    this.startingDate = event //The event here is basically the date value 
                                that you have emitted from your component
}

您也可以对EndingDate进行相同操作

角度日期选择器未定义

2 个答案: