親がクリックイベントをリッスンするとき、ngTemplateOutletの内部でチェックボックスが機能しない - バグ？

Question

私はかなりの間今これを理解しようとしてきました。

基本的に、私はng-templateに1つのチェックボックスを含んでいます。私は<ng-container *ngTemplateOutlet>を使ってそれをコンポーネントに含めます。 ng-containerは、クリックイベントリスナーを持つdivに含まれています。リスナーは現在何もしません。ただ空の関数です。

これを実行すると、すべてが有効です。チェックボックスをオンまたはオフにすることができます。

はここでテンプレートコードです：私はngTemplateOutletにcontextを追加する場合

<div (click)="handleClick($event)"> 
    <ng-container *ngTemplateOutlet="foo"></ng-container> 
</div> 

<ng-template #foo> 
    <input type="checkbox"> 
</ng-template> 

、しかし、これは不思議なチェックボックスを破ります。私はこれまでテンプレートコード更新するのであれば、：

<div (click)="handleClick($event)"> 
    <ng-container *ngTemplateOutlet="foo; context: context"></ng-container> 
</div> 

<ng-template #foo> 
    <input type="checkbox"> 
</ng-template> 

を、私は私のコンポーネントクラス（今のちょうど空のオブジェクト）にcontextというプロパティを持って、私はそれをクリックすると、チェックボックスはもはや確認されなかっます。

おそらく、単なる一例にリンクしやすいだろう：

https://plnkr.co/edit/LHxdP3XBifuYbgmo3ptm

これは間違いなく、この問題を引き起こしているcontextです。 contextを削除すると、チェックボックスが再び機能します。

EDIT：(click)リスナーを含むdivからリスナーを削除すると、チェックボックスも正しく機能します。 contextを提供すると、イベントの伝播に何らかの影響を与えることができますか？

これは角度のバグでしょうか？それとも、私は行方不明のいくつかの概念はありますか？

ありがとうございます！

Answer 1

* ngForためtrackByのように、文脈があるべき、getアクセサを削除します。

context() { 
    return {}; 
} 

DEMO

またはプロパティとしてコンテキストを宣言します

context = {} 

DEMO