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');
    }
}

评论-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>

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

1 个答案: