Question

我有一个组件“ Calendar”和其子级“ Month”。

export class MonthCalendarComponent  {
  @Input() holidayClicked: (day: Date) => Observable<boolean>;

 dayClicked(day: CalendarMonthViewDay): void {
    this.holidayClicked(day.date).subscribe(isHoliday => {
      if (isHoliday) {
        delete day.cssClass;
      } else {
        day.cssClass = 'cal-day-selected';
      }
    });
    // console.log(this.selectedDays);
  }
}

我有一种方法，可以使用CalendarComonent中的@Input holidayClicked

export class CalendarComponent implements OnInit {
  @ViewChildren(MonthCalendarComponent) months: any[];  
holidayClicked(holiday: Date): Observable<boolean> {

    const username = 'user';
    this.holiday.date = holiday;
    this.holiday.stateVal = this.stateSelected;

    this.calendarService.updateEmployee(username, this.holiday).subscribe();

    this.calendarService.updateEmployee(username, this.holiday).map(x => {});
    return new Observable();
  }
}

某些事情绝对是错误的，因为我得到一个错误“ holidayClicked”不是一个函数。如何在子组件中传递我的方法？

Answer 1

直接回答您的问题如何将holidayClicked作为函数传递给子组件-可以通过以下方式实现：

@Component({
  selector: 'calendar',
  templateUrl: "<monthCalendar [holidayClicked]='holidayClickedFunc'></monthCalendar>"
})
export class CalendarComponent implements OnInit {
  ngOnInit() {}

  public holidayClickedFunc = function(): Observable < boolean > {
    return new Observable();
  }
}

@Component({
  selector: 'monthCalendar',
  templateUrl: './MonthCalendar.component.html'
})
export class MonthCalendarComponent {
  @Input() holidayClicked: Function;

  constructor() {
    this.holidayClicked();
  }
}

相反，您可以像这样从子组件向父组件发出事件：

@Component({
  selector: 'calendar',
  templateUrl: "<monthCalendar (open)='apply($event)'></monthCalendar>"
})
export class CalendarComponent implements OnInit {
  ngOnInit() {}

  public apply(): Observable < boolean > {
    return new Observable();
  }
}

@Component({
  selector: 'monthCalendar',
  templateUrl: './MonthCalendar.component.html'
})
export class MonthCalendarComponent {
  @Output() open: EventEmitter < any > = new EventEmitter();

  constructor() {}
  open() {
    this.open.emit(null);
  }
}

Answer 2

我认为您必须像这样使用.bind：

export class MonthCalendarComponent  {
public theBoundCallback: Function;
public theCallback(holiday: Date){
    ...
  }
public ngOnInit(){
    this. theBoundCallback = this. theCallback.bind(this);
  }
  

  @Input() holidayClicked: Function

 dayClicked(day: CalendarMonthViewDay): void {
    this.holidayClicked(day.date).subscribe(isHoliday => {
      if (isHoliday) {
        delete day.cssClass;
      } else {
        day.cssClass = 'cal-day-selected';
      }
    });
    // console.log(this.selectedDays);
  }
}

<child [holidayClicked]="theBoundCallback"></child>

将功能传递给子组件ANGULAR 5

2 个答案: