Question

我开始实现自己的Angular 2应用程序，我想使用Bootstrap框架。问题是我无法使用Angular 2插入Bootstrap。我看到很多人都有同样的问题，但我没有找到解决方案。我通过npm安装了bootstrap 3，我从index.html获得了min.css。

但是当我在我的代码中放入一个下拉菜单时，这是不可点击的：

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials
   <span class="caret"></span></button>
   <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a></li>
     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a></li>
     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript</a></li>
     <li role="presentation" class="divider"></li>
     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Us</a></li>
   </ul>
</div>

Answer 1

为了使Bootstrap 3/4完全正常运行，您还需要包含 .js 来源。通过包含 .css 文件，您只能引用引导程序的样式部分。对于Angular（2），我建议使用项目中捆绑的纯CSS / SCSS文件，并添加一个专门的Angular2-Bootstrap包，如：ng-bootstrap或ng2-bootstrap。

https://ng-bootstrap.github.io

https://valor-software.com/ng2-bootstrap

Answer 2

你必须放置angular和bootstrap库。

https://ng-bootstrap.github.io/#/home

https://v4-alpha.getbootstrap.com/

<link rel="stylesheet" type="text/css" href="style.css">

<!-- IE polyfills, keep the order please -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>

<!-- Agular 2 -->
<script src="https://code.angularjs.org/2.0.0-beta.7/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.7/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.7/angular2.dev.js"></script>

<!-- Agular 2 Router -->
<script src="https://code.angularjs.org/2.0.0-beta.7/router.dev.js"></script>
 <!-- Config Agular 2 and Typescript -->
<script>
  System.config({
    transpiler: 'typescript', 
    typescriptOptions: { emitDecoratorMetadata: true }, 
    packages: {'app': {defaultExtension: 'ts'}} 
  });
  System.import('app/main')
        .then(null, console.error.bind(console));
</script>

示例：https://jsfiddle.net/angulartypescript/n305zyya/

Answer 3

我找到了解决方案！在system.config.ts中需要在包中添加这两行。

packages: {
     'ng2-bootstrap': { format: 'cjs', main: 'bundles/ng2-bootstrap.umd.js', defaultExtension: 'js' },
     'moment': { main: 'moment.js', defaultExtension: 'js' }
}

这条线在地图内

'ng2-bootstrap': 'node_modules/ng2-bootstrap',

之后你应该在相应的模块中导入ng2-bootstrap，它可以正常工作！

Angular 2不使用Bootstrap 3或4

3 个答案: