1
私はangualrテンプレートを使用していない場合、素晴らしいアプリです。しかし、私は今それにコードをエクスポートする必要があります。ボタンをクリックすると甘い警告が呼び出されます。テンプレートを介してボタンが呼び出されると、甘い警告がポップアップ表示されますが、何も起こりません。 DOMが初期化された後にアプリケーションがコードをロードするので、それをバインドすることと関係があると私は納得しています。今AngularJS 2とテンプレートを使用したスウィートアラート
@Component({
selector: 'my-app',
template: `
<form>
<button type="button" (click)="popAlert();" class="ticket_button">Book</button>
</form>
`
})
：
export class AppComponent implements ngAfterViewInit{
//some app logic here
ngAfterViewInit(){
document.querySelector('button').onclick = function(){
swal("Here's a message!");
};
}
}
またはそれ以上がangular2の標準イベントを使用する：
//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>
https://www.npmjs.com/package/ng2-sweetalert2 –
Good point by Stallion;ほとんどの場合、jQueryパッケージは使用しないでください。使用しているライブラリの角型パッケージを探してみてください。ほぼ常に利用可能な1つがあります。 – Patrick
ところで：Sweetalert2は現在、typescriptをネイティブにサポートしています。 – sandrooco