不响应子事件发射器的父组件

Question

考虑到以下两个组件，我正在尝试侦听一个子事件。CommentMetaComponent放在CommentComponent中。

import {Component, Input, Output, EventEmitter} from '@angular/core';

@Component({
    selector: 'comment',
    templateUrl: 'comment-component.html',
})
export class CommentComponent {
    @Input() comment: any;
    @Input() eventId: any;
    showReplies: boolean = false;

    toggleRepliesListener(event) {
        console.log('in');
        this.showReplies = !this.showReplies;
    }
}

/* Comment Meta Container */
@Component({
    selector: 'comment-meta',
    template: `
        <button><ion-icon name="undo"></ion-icon> Reply</button>
        <button *ngIf="comment.parent && comment.comments && comment.comments.length" (click)="toggleReplies()">
          <ion-icon name="chatboxes"> </ion-icon> View {{ comment.comments.length }} replies
        </button>        
      `
})
export class CommentMetaComponent {
    @Input() comment: any;
    @Output() showCommentsToggle: EventEmitter = new EventEmitter();

    toggleReplies() {
        console.log('emitting');
        this.showCommentsToggle.emit('toggled');
    }
}

comment-component.html

<div class="comment">{{ comment.message }}</div>
<comment-meta [comment]="comment"></comment-meta>

<ion-list *ngIf="comment.comments && comment.comments.length && showReplies" (showCommentsToggle)="toggleRepliesListener($event)">
  <comment-thread [comments]="comment.comments" [parent]="comment.id"></comment-thread>
</ion-list>

单击该按钮后，我看到(在控制台中) emitting，但从未见过in日志(我希望在CommentComponent::toggleRepliesListener()中发生这种情况)。

这应该像我期望的那样起作用吗？我该怎么解决呢？

Answer 1

你只是在错误的地方写了(showCommentsToggle)部分。

<comment-meta [comment]="comment" (showCommentsToggle)="toggleRepliesListener($event)"></comment-meta>