【问题标题】：child component EventEmitter not working子组件 EventEmitter 不工作
【发布时间】：2016-12-17 09:01:46
【问题描述】：

我有 CreateProjectComponent，它是子组件，当单击 closeModal 时，我需要在 Parent 中关闭一个 div

模板（html）：

<div (click)="closeModal(true)"></div>

组件.ts

@Component({
    moduleId: module.id,
    selector: "th-create-project",
    templateUrl: "create-project.component.html",
    styleUrls: ["create-project.scss"],
    directives: [
        ThAutocomplete,
        MD_CARD_DIRECTIVES,
        MD_BUTTON_DIRECTIVES,
    ],
})

export class CreateProjectComponent  {
    @Output() onVoted = new EventEmitter<boolean>();

    public closeModal(agreed: boolean) {
        console.log("vote() on CHILD")

        this.onVoted.emit(true);
    }
}

父组件

在我的父组件模板中：

<div *ngIf="(isNewProjectVisible === true)" (onVoted)="receivedEvent()">

在父组件中我有：

@Component({
    selector: "projects-component",
    templateUrl: `client/+projects/projects.component.html`,
    styleUrls: ["client/+projects/projects.scss"],
    directives: [ProjectListComponent, SelectListComponent, CreateProjectComponent],
    providers: [ProjectService, StateService, CreateProjectService],
})
export class ProjectsComponent extends MeteorComponent implements OnInit {

    public receivedEvent() {  //This method isn't being triggered!!!
        this.isNewProjectVisible = false;
        console.log("receivedEvent() on PARENT")

    }

【问题讨论】：

看起来你应该使用th-create-project而不是div作为你正在使用onVoted的元素：<th-create-project *ngIf="isNewProjectVisible" (onVoted)="receivedEvent()"></th-create-project>
我假设这不是整个 ProjectsComponent，而且“isNewProjectVisble”有时是真的。否则 div 将不存在 ;)
@MarkRajcok，如果你愿意，请标记这就是答案，请添加答案并为你投票；D，希望你能提供更多信息，为什么你知道这是答案？

标签： angular typescript angular2-directives angular2-services

【解决方案1】：

您需要指定要使用的组件的选择器，而不是div：

<th-create-project *ngIf="isNewProjectVisible" (onVoted)="receivedEvent()">
</th-create-project>

注意，如果你使用div，Angular 不会仅仅因为你使用它的输出属性之一而自动实例化 CreateProjectComponent 的实例——也就是说，仅仅因为 (onVoted) 在父模板中。 Angular 也不会自动实例化 CreateProjectComponent 的实例，因为它列在 directives 数组中。您必须使用选择器在模板中指定它，如上所示，才能获取实例。

【讨论】：