web-dev-qa-db-ja.com

angle2でsweetalert2を使用する方法

angular project。でnpm開始後にこのエラーを取得します。

app/app.component.ts（12,7）：エラーTS2304：名前 'swal'が見つかりません。 app/app.component.ts（21,7）：エラーTS2304：名前 'swal'が見つかりません。

angularプロジェクトを作成しました。app.component.ts内に甘いアラートコードを追加しました

export class AppComponent {
deleteRow() {
      swal({
      title: 'Are you sure?',
      text: "You won't be able to revert this!",
      type: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: 'Yes, delete it!'
    }).then(function() {
      swal(
        'Deleted!',
        'Your file has been deleted.',
        'success'
      );
    })
  }
}

やった

npm install sweetalert2 --save

また、index.htmlにパスを追加しました

<script src="node_modules/sweetalert2/dist/sweetalert2.min.js"></script>
<link rel="stylesheet" type="text/css" href="node_modules/sweetalert2/dist/sweetalert2.css">
javascriptangulartypescriptsweetalertsweetalert2
16
Akash Rao

@yurzuiによって与えられたソリューションは、angular2でのみ機能します。私はほとんどすべてを試しました。プランカーはなくなるかもしれません。私は他の人のためにここに置いています：

Plunker

1）これらのcssとjsをindex.htmlの上に追加します

<link rel="stylesheet" href="https://npmcdn.com/[email protected]/dist/sweetalert2.min.css">

<script src="https://npmcdn.com/[email protected]/dist/sweetalert2.min.js"></script>

2）swalを使用するコンポーネントにこの行を追加します。

declare var swal: any;

これらの変更後、私のswal名前空間が利用可能になり、その機能を使用できるようになりました。

ng2-sweelalert2またはその他のモジュールをインポートしませんでした。

21
user1501382

NPMインストールSweetAlert2

npm install sweetalert2

あなたは付け加えられます

import swal from 'swal'; 
//import swal from 'sweetalert2'; --if above one didn't work

コンポーネントで使用すると、コンポーネントでlikeの使用を開始できます。

swal({
  title: 'Error!',
  text: 'Do you want to continue',
  type: 'error',
  confirmButtonText: 'Cool'
})

これを維持するために太い矢印を使用できます。

deleteStaff(staffId: number) {
     swal({
          type:'warning',
          title: 'Are you sure to Delete Staff?',
          text: 'You will not be able to recover the data of Staff',
          showCancelButton: true,
          confirmButtonColor: '#049F0C',
          cancelButtonColor:'#ff0000',
          confirmButtonText: 'Yes, delete it!',
          cancelButtonText: 'No, keep it'
        }).then(() => {
        this.dataService.deleteStaff(staffId).subscribe(
          data => {
            if (data.hasOwnProperty('error')) {
              this.alertService.error(data.error);
            } else if (data.status) {
              swal({
                type:'success',
                title: 'Deleted!',
                text: 'The Staff has been deleted.',              
              })
            }
          }, error => {
            this.alertService.error(error);
          });
        }, (dismiss) => {
          // dismiss can be 'overlay', 'cancel', 'close', 'esc', 'timer'
          if (dismiss === 'cancel') {
            swal({
              type:'info',
              title: 'Cancelled',
              text: 'Your Staff file is safe :)'
            })
          }
        });
    }

Angular-cli.jsonで

"styles": [
            "../node_modules/sweetalert2/dist/sweetalert2.css"

        ],
"scripts": [
            "../node_modules/sweetalert2/dist/sweetalert2.js"
        ],
9
Velu S Gautam

@ user1501382のソリューションは、たとえば数週間前までSweetAlert2の場合に当てはまるタイプ定義を持たない純粋なJavaScriptパッケージに非常に便利な場合があります。また、グローバルswal変数を使用することはあまり適切ではなく、はるかに改善できます。

SweetAlert2に型定義があるので、次のことができます。

import swal from 'sweetalert2';

swal({ ... }); // then use it normally and enjoy type-safety!

また、<link>などを使用して、SweetAlertのCSSファイルをインポートします。 Webpackのようなモジュールバンドラーを使用し、css-loaderとstyle-loaderを構成している場合、次のようなこともできます。

import 'sweetalert2/dist/sweetalert2.css';

Edit：これはSweetAlert2 v.7.0以降では必要ないはずです。 0。CSSビルドをJavaScriptにバンドルし、実行時にページにスタイルを挿入します。

また、Angular風のユーティリティを使用してSweetAlert2を簡単に使用してクラスを作成できるライブラリを紹介します：sweetalert2/ngx-sweetalert2（Angularの公式SweetAlert2統合になりました）

試してみる！

8
Morgan Touverey Quilling

npm install sweetalert2

あなたが試すことができます：

import swal from 'sweetalert2'; 

swal.fire('Hello world!')//fire
2
user11373723

これが私のプロジェクトでの使い方です

npm install sweetalert2

インストール後、ウィンドウに追加

window.swal = require('sweetalert2');

それで全部です。 cssに問題がある場合は、scssファイルをインポートするだけです

@import "node_modules/sweetalert2/src/sweetalert2";

または、node_moduleディレクトリのcssファイルを含めます

0
Canaan Etai