Süße Warnung mit AngularJS 2 und Templates

Ich habe eine kleine App, die gut funktioniert, wenn nicht angurr Templates verwendet. Aber ich muss jetzt den Code hinein exportieren. Sweet Alert sollte beim Klicken auf eine Schaltfläche aufgerufen werden. Wenn also die Schaltfläche durch die Vorlage aufgerufen wird, soll der süße Alarm auftauchen, aber nichts passiert. Ich nehme an, dass es etwas mit der Bindung zu tun hat, da die App den Code lädt, nachdem das DOM initialisiert wurde.Süße Warnung mit AngularJS 2 und Templates

//app.component.ts 

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <form> 
    <button type="button" class="ticket_button">Book</button> 
    </form> 
    ` 
}) 
export class AppComponent { 
//some app logic here 
} 


//index.html 
//i have not included the normal header stuff here, however the my-app class shows the button 

<html<body> 
    <my-app class="main_ticket">Loading...</my-app> 
</body></html> 

// I have tried to use event binding from Jquery $('.main_ticket').on('change', '.ticket_button', function() {//logic here}, but it also didn't work 

<script> 
//Sweet Alert call 
document.querySelector('button').onclick = function(){ 
    swal("Here's a message!"); 
}; 
</script>

Quelle

2016-07-26 Paddy

https://www.npmjs.com/package/ng2-sweetalert2 –

Guter Punkt von Hengst; In den meisten Fällen sollten Sie die jQuery-Pakete nicht verwenden, sondern nach eckigen Paketen der von Ihnen verwendeten Bibliotheken suchen. Es ist fast immer eins verfügbar. – Patrick

Übrigens: Sweetalert2 unterstützt jetzt nativ Typoskript. – sandrooco

Sie haben Leben Cylcle Hooks verwenden, um es zum Laufen zu bringen:

export class AppComponent implements ngAfterViewInit{ 
//some app logic here 

    ngAfterViewInit(){ 
     document.querySelector('button').onclick = function(){ 
      swal("Here's a message!"); 
     }; 
    } 

}

Oder besser angular2 Standard Ereignisse verwenden:

@Component({ 
    selector: 'my-app', 
    template: ` 
    <form> 
    <button type="button" (click)="popAlert();" class="ticket_button">Book</button> 
    </form> 
    ` 
})

Jetzt in der Klasse:

export class AppComponent { 
//some app logic here 
    popAlert(){ 
     swal("Here's a message!"); 
    } 
}

Quelle

2016-07-26 08:24:00 Jai

Ich habe zwei Tage damit verbracht, meinen Kopf darauf zu schlagen. Vielen Dank, haben Sie Empfehlungen zu Angular 2-Ressourcen? über die offizielle Dokumentation hinaus? – Paddy

Nun, ich folge ein paar Online-Videos und lese die Dokumente, die versuchen, da zu sein, immer noch ein Kind in angular2. – Jai

Süße Warnung mit AngularJS 2 und Templates

Antwort

Verwandte Themen