Tengo un escenario en el que necesito crear una etiqueta desde TS y necesito capturar el evento de clic si alguien hace clic en la etiqueta.
en html
<p [innerHtml]="textField"></p> <button (click)="generateLink()">click</button>
En T
textField = 'Hello click button for link'; generateLink() { this.textField = `${this.textField} <a href="#" onclick="update()">click me</a>`; } update(){ console.log('click me is clicked') }
Aquí, cada vez que haga clic en mí, haga clic en Necesito activar el método de actualización. enlace al enlace de stackblitz
Por favor, alguien que me diga cómo lograrlo. Gracias.
Parece que en este caso usar *ngIf
sería la idea correcta para usar aquí. En angular, no compila HTML sobre la marcha, como solía hacer angularjs usando $compile
API.
Lo que quiero decir es que la etiqueta innerHTML
solo hará el trabajo de representar el HTML dentro del DOM, no habilitará ningún enlace allí (no puede llamar al método de update
allí). Por lo tanto, puede usar la directiva *ngIf
para mostrar y ocultar DOM condicionalmente.
<ng-container *ngIf="showLink"> {{textField}} <a href="#" (click)="update()">click me</a> </ng-container> <button (click)="generateLink()">click</button>
TS
showLink = false; generateLink() { this.showLink = true; }
Una forma alternativa de generar un enlace sin usar *ngIf
es usar una combinación de ng-template
y ng-container
para generar e inyectar la plantilla manualmente.
HTML
<ng-container #links></ng-container> <button (click)="generateLinkFromTemplate()">another click</button> <ng-template #link> {{ textField }} <a href="#" (click)="update()">click me</a> </ng-template>
TS
@ViewChild('links', { read: ViewContainerRef }) links: ViewContainerRef; @ViewChild('link', { read: TemplateRef }) link: TemplateRef<any>; generateLinkFromTemplate() { this.links.createEmbeddedView(this.link); }