子要素のイベントエミッタに親要素が応答しない

Question

次の2つの要素があると、子要素のイベントを待機しようとしています。 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（コンソールで）見たが、私は、私はCommentComponent::toggleRepliesListener()内で起こることを期待している（inが記録され見ることはありません。

はこの作品、私はそれを修正する方法を教えてください。それが期待するべきであると？

Answer 1

あなたにチュstは(showCommentsToggle)の部分を間違った場所に書きました。