У вас есть несколько @output в дочернем компоненте? У меня есть два и один не работает

Question

Это ребенок компонент:

@Component({ 
    selector: 'kg-dateSpinner', 
    templateUrl: 'kgDateSpinner.component.html', 
    styleUrls: ['kgDateSpinner.component.css'] 
}) 

export class KgDateSpinnerComponent implements OnInit { 
    @Output() onChanged = new EventEmitter<DateSpinnerReturn>(); 
    @Output() onLoadFood = new EventEmitter<DateSpinnerReturn>(); 

    sr: DateSpinnerReturn; 
    userSettings: User; 
    cd = moment(); 
    currentDate: string = this.cd.format("MMMM DD, YYYY");; 
    dateSpinnerForm: FormGroup; 

    constructor(
    private ts: ThemeService, 
    private fb: FormBuilder, 
    private ss: SettingsService) { 

    this.sr = new DateSpinnerReturn(); 
    } 


    ngOnInit() { 
    this.dateSpinnerForm = this.fb.group({ 
     currentDate: [this.currentDate, []] 
    }); 
    } 

    onLoadFoodRequest() { 
    this.sr.spinValue = this.currentDate; 
    this.onLoadFood.emit(this.sr) 
    } 

    onDateSelected(event: any) { 
    this.cd = moment(event); 
    this.returnEvent(); 
    } 

    onIncrement() { 
    this.cd = this.cd.add(1, 'day'); 
    this.returnEvent(); 
    } 

    onDecrement() { 
    this.cd = this.cd.subtract(1, 'day'); 
    this.returnEvent(); 
    } 

    returnEvent() { 
    this.currentDate = this.cd.format("MMMM DD, YYYY"); 
    this.dateSpinnerForm.controls['currentDate'].setValue(this.currentDate, { onlySelf: true }); 
    this.sr.spinValue = this.currentDate; 
    this.onChanged.emit(this.sr) 
    } 

Ребенок компонент HTML:

<form [formGroup]="dateSpinnerForm" class="ui form" novalidate> 
    <button pButton (click)="onDecrement()" icon="fa-backward"></button> 
    <div style="padding-top: 10px;width: 208px; display: inline-block;"> 
     <p-calendar formControlName="currentDate" showAnim="slideDown" (onSelect)="onDateSelected($event)" [showIcon]="true" [readonlyInput]="true" dateFormat="MM d, yy"></p-calendar> 
    </div> 

    <button pButton (click)="onIncrement()" icon="fa-forward"></button> 
    <button pButton (click)="onLoadFoodRequest()" icon="fa-cutlery" iconPos="left"></button> 
</form> 

Родительский компонент:

onChanged(sr: DateSpinnerReturn) { 
    this.diaryDate = sr.spinValue; 
} 

onLoadFood(sr: DateSpinnerReturn) { 
    this.diaryDate = sr.spinValue; 
} 

Родитель HTML:

<header> 
    <kg-dateSpinner></kg-dateSpinner> 
</header> 

Событие onChanged получает данные от дочернего элемента, но onLoadFood этого не делает. Нажатие кнопки на дочернем компоненте активирует функцию LoadFoodRequest и не вызывает ошибки, событие никогда не делает ее родительской. Есть идеи?

Answer 1

Вы должны связать свой родитель к вашему ребенку компоненте, изменить родительский HTML для этого:

<header> 
    <kg-dateSpinner (onChanged)="onChanged($event)" (onLoadFood)="onLoadFood($event)"></kg-dateSpinner> 
</header> 

Так внутри скобка Вашего имя выходного ребенка, внутри цитаты вашей материнской функция