EventEmitter가 Angular 2로 작동하지 않습니다

Question

described here in the angular 2 docs과 같은 상위 구성 요소의 하위 구성 요소에 대한 이벤트를 수신하려고하지만 이벤트가 상위 구성 요소로 전달되지 않습니다.

부모 :

발견

여기 this.onResultsRecieved.emit(true);

가 포함 된 모든 내 코드입니다 : 내가 확실히 알고

코드는 이벤트를 방출하는 아동이 라인을 통해 실행되는 페이지 2.0 ND-page.component.html :

<div id="find-page"> 
    <find-form></find-form> 
</div> 
<div (onResultsRecieved)="onResultsRecieved($event)" *ngIf="showResults" id="results-page"> 
</div> 

아이 :

find-form.component.ts 

import { Component, OnInit, ViewChild, ElementRef, EventEmitter, Output } from '@angular/core'; 
import { REACTIVE_FORM_DIRECTIVES, 
    FormGroup, 
    FormBuilder, 
    Validators, 
    ControlValueAccessor 
} from '@angular/forms'; 
import { ResultService } from '../services/result.service'; 
import { Result } from '../result' 
import { NumberPickerComponent } from './number-picker.component'; 
import { DistanceUnitsComponent } from './distance-units.component'; 
import { MapDemoComponent } from '../shared/map-demo.component'; 
import { AreaComponent } from './area-picker.component'; 
import { GoComponent } from '../shared/go.component'; 
import { HighlightDirective } from '../highlight.directive'; 

@Component({ 
    selector: 'find-form', 
    templateUrl: 'app/find-page/find-form.component.html', 
    styleUrls: ['app/find-page/find-form.component.css'], 
    providers: [ResultService], 
    directives: [REACTIVE_FORM_DIRECTIVES, 
    NumberPickerComponent, 
    DistanceUnitsComponent, 
    MapDemoComponent, 
    AreaComponent, 
    GoComponent] 
}) 
export class FindFormComponent implements OnInit { 
    findForm: FormGroup; 
    submitted: boolean; // keep track on whether form is submitted 
    events: any[] = []; // use later to display form changes 
    @ViewChild('keywordsInput') keywordsInput; 
    @Output() onResultsRecieved = new EventEmitter<boolean>(); 
    results: Result[]; 

    constructor(private resultService: ResultService, 
    private formBuilder: FormBuilder, 
    el: ElementRef) { } 


    goClicked(): void { 
    this.getResults(); 

    } 

    getResults(): void { 
    this.results = this.resultService.getResults(); 
    console.log(this.results); 
    this.onResultsRecieved.emit(true); 
    } 

    ngOnInit() { 
    this.findForm = this.formBuilder.group({ 
     firstname: ['', [Validators.required, Validators.minLength(5)]], 
     lastname: ['', Validators.required], 
     keywords: [], 
     area: ['', Validators.required], 
     address: this.formBuilder.group({ 
     street: [], 
     zip: [], 
     city: [] 
     }) 
    }); 
    this.findForm.valueChanges.subscribe(data => console.log('form changes', data)); 
    } 

    focusKeywordsInput() { 
    this.keywordsInput.nativeElement.focus(); 
    } 

    save(isValid: boolean) { 
    this.submitted = true; 
    console.log(isValid); 
    console.log(this.findForm); 
    } 
} 

왜 이벤트가 실행 부모의 onResultsRecieved() 함수를 트리거하지 않는 이유는 무엇입니까? 정기적 div 요소에 바인더 제본 이벤트를 가지고,

는 this Stack Overflow answer 구성 요소에 events : ['update']이 포함되어 있습니다 있지만 find-page.component.html에서 the angular component interaction docs

Answer 1

에 있지 않기 때문에 나는 그게 뭔지 모르겠어요. find-form 구성 요소에 이벤트를 바인딩해야합니다. 이벤트를 수신하려는 EventEmitter가 실제로 포함되어 있기 때문입니다.

<find-form (onResultsReceived)="onResultsReceived($event)"></find-form> 

당신이, 당신은 또한 맞춤법 검사를했습니다 명심 & 붙여 넣기를 복사하면 잘못된 '수신'. :]