角度2 - どのように（クリック）イベント動的に追加するDIV

Question

を追加する私はこのような私のコンポーネント内の関数を経由して、私のページにdiv要素を追加しよう：div要素はsomefunctionによって付加された

showTile($event: any,id: number){ 
     $($event.target).append('<div (click)="somefunction(id)"></div>')) 
} 

somefunction(id :number){ console.log(id) } 

です角度js 1.xでは、私は$ compileを使って作業していました。

Answer 1

あなたは、あなたのアプリケーションがAngular2で動作する場合、DOMツリーに影響を与えるためにjQueryのを使用しないでください。 には常に方法がありますこのようなアンチパターンを避けてください。

私が正しく理解していれば、要素をクリックするたびにdivを追加する必要があります。このために別のコンポーネントを作成しないのはなぜですか？テンプレートでは、* ngIfディレクティブを使用して追加のコンテンツを表示/非表示にし、のクリックイベントを@Componentにバインドすると、ブール値のプロパティが切り替わります。次に、親コンポーネントで、このコンポーネントを必要なだけ多く使用します。これらの子コンポーネントが固有であり、親コンポーネントで利用可能な情報が必要な場合は、@Inputだけです。親コンポーネントの関数を呼び出す場合は、子に@Outputを使用して親関数を呼び出すことができます。そこ

あなたはこのことについてたくさん読むことができます - component.htmlファイルの中https://angular.io/docs/ts/latest/cookbook/component-communication.html

Answer 2

を

<div *ngIf="condition" (click)="dosomething(data)"> 
<label >Click here </label> 
</div>  
//You div will appear only if condition is true 

component.tsファイル

dosomething(item){ 
    console.log(item); 
    //do something here 
}