子组件 EventEmitter 不工作

Question

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

模板（html）：

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

component.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")

    }

Answer 1

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

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

请注意，如果您使用 div，Angular 将不会自动实例化 CreateProjectComponent 的实例，只是因为您正在使用它的输出属性之一——即，只是因为 (onVoted) 是在父模板中。 Angular 也不会自动实例化 CreateProjectComponent 的实例，因为它列在 directives 数组中。您必须使用选择器在您的模板中指定它，如上所示，以便获得一个实例。

子组件 EventEmitter 不工作

child component EventEmitter not working

angular

typescript

angular2-directives

angular2-services

模板（html）：

component.ts

父组件