Angular 2不能使用Bootstrap 3或4

我開始實現我自己的Angular 2應用程序，我想使用Bootstrap框架。問題是我無法將Angular 2與Bootstrap結合使用。我發現很多人都遇到同樣的問題，但我沒有找到解決方案。我通過npm安裝了bootstrap 3，我從index.html中獲取了min.css。Angular 2不能使用Bootstrap 3或4

但是當我把一個下拉菜單，在我的代碼，這是不可點擊：自舉3/4

<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>

來源

2017-03-01 pik4

你在使用'ng2-bootstrap'嗎？ – PierreDuc

我找到了解決辦法！在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的自舉和它的作品！

來源

2017-03-02 05:42:47 pik4

爲了充分發揮作用，你也需要包括的.js來源。通過包含.css文件，您只能引用引導的樣式部分。對於Angular（2）我建議使用捆綁在項目中的純CSS/SCSS文件，並添加一個專門的Angular2-Bootstrap軟件包，如：ng-bootstrap或ng2-bootstrap。

https://ng-bootstrap.github.io

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

來源

2017-03-01 13:45:13

你必須把角和引導庫。

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/

來源

2017-03-01 14:36:23 JMF

Angular 2不能使用Bootstrap 3或4

回答

相關問題