Sweet Alert с использованием AngularJS 2 и шаблона

У меня есть небольшое приложение, которое отлично работает, если вы не используете angualr templating. Однако мне нужно экспортировать код в него. Sweet Alert следует вызывать при нажатии кнопки. Поэтому, когда кнопка вызывается через шаблон, мигает предупреждение, но ничего не происходит. Я согласен, что это связано с необходимостью привязки, поскольку приложение загружает код после того, как DOM имеет intializied.Sweet Alert с использованием AngularJS 2 и шаблона

//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>

источник

2016-07-26 Paddy

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

Хорошая точка на жеребец; В большинстве случаев вам не следует использовать пакеты jQuery, но старайтесь искать угловые пакеты библиотек, которые вы используете. Существует почти всегда один доступный. – Patrick

Кстати: Sweetalert2 теперь поддерживает машинопись. – sandrooco

Вы должны использовать Life Cylcle Крючки, чтобы заставить его работать:

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

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

}

Или лучше использовать Стандартные события angular2 в:

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

сейчас в классе:

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

источник

2016-07-26 08:24:00 Jai

Я провел два дня, ударяя головой об этом. Большое вам спасибо, есть ли у вас рекомендации по ресурсам Angular 2? помимо официальной документации? – Paddy

Ну, я следую некоторым онлайн-видео и читаю документы, пытающиеся быть там, все еще младенец в угловом2. – Jai

Sweet Alert с использованием AngularJS 2 и шаблона

ответ

Смежные вопросы