Angular 2 不适用于 Bootstrap 3 或 4

Question

我开始实现自己的 Angular 2 应用程序，我想使用 Bootstrap 框架。问题是我不能用Angular插入Bootstrap 2.我看到很多人有同样的问题，但我没有找到解决办法。我通过 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 文件，您仅引用 bootstrap 的样式部分。对于 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

Angular 2 not working with Bootstrap 3 or 4

twitter-bootstrap

drop-down-menu

twitter-bootstrap-3

ng2-bootstrap

angular