Angular2:导入引导插件
Posted
技术标签:
【中文标题】Angular2:导入引导插件【英文标题】:Angular2: Importing Bootstrap Plugins 【发布时间】:2017-03-13 11:59:03 【问题描述】:我遇到了 Angular2、Bootstrap 3.3.7 和 Bootstrap 插件的问题。 在“index.html”中,我导入了所有样式表和 javascript 文件。
这是index.html
:
<!-- Bootstrap & JQuery -->
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/tether.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>
<!-- Bootstrap Toggle Switch -->
<link rel="stylesheet" href="css/bootstrap-toggle.min.css">
<script src="js/bootstrap-toggle.min.js"></script>
<!-- Bootstrap Table -->
<link rel="stylesheet" href="css/bootstrap-table.min.css">
<script src="js/bootstrap-table.min.js"></script>
<script src="js/bootstrap-table-zh-CN.min.js"></script>
<!-- eigener Stylesheet -->
<link rel="stylesheet" href="css/custom.css">
<script>
System.import('app').catch(function(err) console.error(err); );
</script>
<base href="/">
</head>
<!-- 4. Display the application -->
<body>
<DVBViewerApp>Loading...</DVBViewerApp>
</body>
</html>
这些文件都被 lite-server 找到了,但我有一个问题:
Bootstrap 3.3.7 本身可以毫无问题地处理整个应用程序。
但是这两个插件(bootstrap-toggle 和 bootstrap-table)都不适用于我的任何组件。他们只是在index.html
工作。
有谁知道问题出在哪里?
非常感谢!
【问题讨论】:
这不是在 Angular 中导入bootstrap
或其他 css 框架的正确方法。您应该通过 npm install bootstrap
下载引导文件
【参考方案1】:
首先运行 npm install bootstrap@3.3.7。
然后检查你的项目结构是否和我的一样。
项目 |____ e2e |____ 节点模块 |____ 源 |____ .gitignore |____ angular.json |____ 包.json |____ 包锁.json |____ tsconfing.json |____ tslint.json
如果相同添加this。
【讨论】:
以上是关于Angular2:导入引导插件的主要内容,如果未能解决你的问题,请参考以下文章
使用 Angular2 和 stripe.js 导入 Stripe
将 jQuery 插件导入 Angular 2+ 拒绝执行脚本,因为它的 MIME 类型('text/html')不可执行