18

angularプロジェクトで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">
4

6 に答える 6

22

@yurzui によって提供されたソリューションは、angular2 でのみ機能します。私はほとんどすべてを試しました。プランカーが消える可能性があります。私は他の人のためにここに置いています：

プランカー

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

<link rel="stylesheet" href="https://npmcdn.com/sweetalert2@4.0.15/dist/sweetalert2.min.css">

<script src="https://npmcdn.com/sweetalert2@4.0.15/dist/sweetalert2.min.js"></script>

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

declare var swal: any;

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

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

于 2016-10-06T08:38:54.280 に答える
8

@ user1501382 のソリューションは、たとえば、型定義を持たない純粋な JavaScript パッケージでは非常に便利な場合があり、数週間前までは SweetAlert2 の場合もそうでした。また、グローバルswal変数の使用はあまりきれいではありませんが、もっとうまくやることができます。

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

import swal from 'sweetalert2';

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

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

import 'sweetalert2/dist/sweetalert2.css';

編集: CSS ビルドを JavaScript にバンドルし、実行時にページにスタイルを挿入する SweetAlert2 v.7.0.0 以降、これは必要ありません。

また、SweetAlert2 を簡単かつクラスに使用するための Angular 風のユーティリティを提供する私のライブラリを紹介します: sweetalert2/ngx-sweetalert2 (これは現在、Angular の公式の SweetAlert2 統合です)

試してみる！

于 2017-01-31T23:02:09.410 に答える