Angular 2 - Wie (click) Ereignis hinzufügen, um dynamisch hinzugefügt div

Question

ich versuche, ein div in meine Seite über eine Funktion in meiner Komponente wie folgt anhängen:

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

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

Die div von Einefunktion angehängt worden ist, nicht behandelt, in eckigen js 1.x Ich arbeitete mit $ kompilieren.

Answer 1

Sie sollten jQuery nicht verwenden auf DOM-Baum zu beeinflussen, wenn die Anwendung mit Angular2 arbeitet. Es gibt immer einen Weg, um vermeiden, diese Art von Anti-Muster.

Wenn ich richtig verstehe, möchten Sie div bei jedem Klick auf Element anfügen. Warum erstellen Sie keine andere Komponente dafür? Verwenden Sie in der Vorlage die * ngIf-Direktive, um zusätzlichen Inhalt ein-/auszublenden, und bind click-Ereignis an @Component, das die boolesche Eigenschaft umschalten wird. Dann in Elternkomponente verwenden Sie einfach diese Komponente so viele wie Sie möchten. Wenn diese untergeordneten Komponenten spezifisch sind und Informationen benötigen, die in der übergeordneten Komponente verfügbar sind, geben Sie einfach @Input an. Wenn Sie die Funktion der übergeordneten Komponente aufrufen möchten, können Sie @Output im untergeordneten Element verwenden und dann - die übergeordnete Funktion aufrufen.

Dort können Sie viel über diese Zeilen lesen - https://angular.io/docs/ts/latest/cookbook/component-communication.html

Answer 2

Innen component.html Datei

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

Innen component.ts

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