EventEmitter不能在Angular 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（）函数来执行？

请注意，this Stack Overflow answer包括在组件上events : ['update']但我不知道那是什么，因为它不是在the angular component interaction docs

Answer 1

在find-page.component.html，你必须绑定到正规的div元素的事件。您需要将事件绑定到find-form组件，因为它实际上包含您希望从中接收事件的EventEmitter。

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

如果你复制粘贴&在，请记住，你也一直在拼写“接收”错误。 ：]