Javascript 如何在angular2中使用sweetalert2
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38677664/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use sweetalert2 in angular2
提问by Akash Rao
Getting this error after npm start in angular project.
在 angular 项目中启动 npm 后出现此错误。
app/app.component.ts(12,7): error TS2304: Cannot find name 'swal'. app/app.component.ts(21,7): error TS2304: Cannot find name 'swal'.
app/app.component.ts(12,7): 错误 TS2304: 找不到名称“swal”。app/app.component.ts(21,7): 错误 TS2304: 找不到名称“swal”。
I created an angular project. Inside app.component.ts I added sweet alert code
我创建了一个角度项目。在 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'
);
})
}
}
I did
我做了
npm install sweetalert2 --save
and also added the path in index.html
并在 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">
回答by user1501382
Solution given by @yurzui is the only worked with angular2. I tried almost everything. Plunker may go away. i'm putting it here for others:
@yurzui 给出的解决方案是唯一适用于 angular2 的解决方案。我几乎尝试了所有方法。Plunker 可能会消失。我把它放在这里给别人：
1) Add these css and js on top of your index.html
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) Add this line to the component where you want to use swal.
2) 将此行添加到要使用 swal 的组件中。
declare var swal: any;
After these changes my swal namespace is available and i'm able to use it's features.
在这些更改之后，我的 swal 命名空间可用，我可以使用它的功能。
I did not import any ng2-sweelalert2or any other module.
我没有导入任何ng2-sweelalert2或任何其他模块。
回答by Velu S Gautam
NPM install SweetAlert2
NPM 安装 SweetAlert2
npm install sweetalert2
You can add
你可以加
import swal from 'swal';
//import swal from 'sweetalert2'; --if above one didn't work
in your component and you can start using like in your component.
在您的组件中，您可以开始在您的组件中使用 like。
swal({
title: 'Error!',
text: 'Do you want to continue',
type: 'error',
confirmButtonText: 'Cool'
})
You can use fat arrow to maintain this.
您可以使用胖箭头来保持这一点。
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 :)'
})
}
});
}
In angular-cli.json
在 angular-cli.json 中
"styles": [
"../node_modules/sweetalert2/dist/sweetalert2.css"
],
"scripts": [
"../node_modules/sweetalert2/dist/sweetalert2.js"
],
回答by Morgan Touverey Quilling
@user1501382's solution is very handy sometimes for pure-JavaScript packages that don't have type definitions, for example, and that was the case for SweetAlert2, until a few weeks ago.
Also, using the global swalvariable isn't very neat and you can do much better.
@user1501382 的解决方案有时对于没有类型定义的纯 JavaScript 包来说非常方便，例如，SweetAlert2 就是这种情况，直到几周前。此外，使用全局swal变量不是很整洁，您可以做得更好。
Now that SweetAlert2 has type defintions, you can do:
现在 SweetAlert2 具有类型定义，您可以执行以下操作：
import swal from 'sweetalert2';
swal({ ... }); // then use it normally and enjoy type-safety!
Also import SweetAlert's CSS file, via a <link>or whatever. When you use a module bundler like Webpack and you have css-loader and style-loader configured, you can also do something like:
还可以通过 a<link>或其他方式导入 SweetAlert 的 CSS 文件。当您使用像 Webpack 这样的模块打包器并且配置了 css-loader 和 style-loader 时，您还可以执行以下操作：
import 'sweetalert2/dist/sweetalert2.css';
import 'sweetalert2/dist/sweetalert2.css';
Edit: this should not be necessary since SweetAlert2 v.7.0.0, which bundles the CSS build into the JavaScript, and injects the styles in the page at runtime.
编辑：这应该不是必需的，因为 SweetAlert2 v.7.0.0 将 CSS 构建捆绑到 JavaScript 中，并在运行时在页面中注入样式。
Also, I'll let you discover my library, that provides Angular-esque utilities to use SweetAlert2 with ease and class: sweetalert2/ngx-sweetalert2(it is now the official SweetAlert2 integration for Angular)
另外，我会让你发现我的库，它提供了 Angular 风格的实用程序，可以轻松和类地使用 SweetAlert2：sweetalert2/ngx-sweetalert2（它现在是 Angular 的官方 SweetAlert2 集成）
Give it a try!
试一试！
回答by user11373723
npm install sweetalert2
npm 安装 sweetalert2
You can try:
你可以试试：
import swal from 'sweetalert2';
swal.fire('Hello world!')//fire
回答by Canaan Etai
this is how i use it on my projects
这就是我在我的项目中使用它的方式
npm install sweetalert2
after installing add swal to window
安装后将 swal 添加到窗口
window.swal = require('sweetalert2');
thats all. if you are having problem with css, just import the scss file
就这样。如果您遇到 css 问题，只需导入 scss 文件
@import "node_modules/sweetalert2/src/sweetalert2";
or include the css file from the node_module directory
或包含 node_module 目录中的 css 文件
