EventEmitterが角2で動作していません

Question

described here in the angular 2 docsのような親コンポーネントの子コンポーネントのイベントをリッスンしようとしていますが、そのイベントは親に決して送られません。

親：：

検索

ここthis.onResultsRecieved.emit(true);

が関与するすべての私のコードは次のとおりです。私は確かに知って

コードは、イベントを発する子でこのラインを通ること-page.component.ts

import { Component } from '@angular/core'; 
import { NavbarComponent } from '../shared/navbar.component'; 
import { FindFormComponent } from '../find-page/find-form.component'; 

@Component({ 
    selector: 'find-page', 
    templateUrl: 'app/find-page/find-page.component.html', 
    styleUrls: ['app/find-page/find-page.component.css' ], 
    directives: [ FindFormComponent ] 
}) 
export class FindPageComponent { 
    showResults = false; 

    onResultsRecieved(recieved: boolean) { 
     if (recieved) { 
      this.showResults = true; 
     }else { 
      this.showResults = false; 
     } 
    } 
} 

fi 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> 

あなたが、あなたはまた、スペルしてきた心に留めておく&ペーストをコピーした場合、間違った「受け取ります」。 ：]