將ng2-bootstrap導入到Angular2應用程序的正確方法是什麼？

Question

我想有基於此引導例如響應應用程序欄 - http://getbootstrap.com/components/#navbar

我刪除的大部分代碼，並放置在JSBin結果 -​​。當屏幕被調整至超小型崩塌最右邊的選項進入菜單：

點擊最右邊的按鈕產量：

尼斯。

現在我試圖做同樣的角度2.這裏是plunker - http://plnkr.co/edit/doDyRQSV6aBqZ0KLgGnz

CSS的正常工作，但點擊該按鈕並沒有什麼 - 我們需要的引導代碼。我很困惑在哪裏插入ng2-bootstrap。我不需要從它導入任何組件，但是如果它像原始引導一樣工作，那麼僅僅包含它的本質應該使按鈕工作。

的plunker開始關閉由角2模板（http://plnkr.co/edit/nl0F7N?p=preview）：

添加應用程序/應用-bar.component.ts：

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-bar', 
    styles: [` 
    .app-bar { 
     height: 65px; 
     padding: 5px 30px; 
     background-color: #00BCD4; 
    } 
    .logo { 
     color: white; 
     font-size: 30px; 
     font-weight: 300; 
     cursor: pointer; 
    } 
    .link { 
     color: white; 
     font-size: 24px; 
     font-weight: 400; 
     cursor: pointer; 
    } 
    `], 
    template: ` 
<nav class="app-bar navbar navbar-default"> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-bar-collapse" aria-expanded="false"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="logo navbar-brand" href="#">My&nbsp;App</a> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="app-bar-collapse"> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#" class="link">Settings</a></li> 
     <li><a href="#" class="link">Sign&nbsp;out</a></li> 
     </ul> 
    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav> 
` 
}) 
export class AppBarComponent {} 

改變應用程序/ app.component。 TS到

import { Component } from '@angular/core'; 
import { AppBarComponent } from './app-bar.component'; 

@Component({ 
    selector: 'my-app', 
    directives: [AppBarComponent], 
    template: '<app-bar></app-bar>' 
}) 
export class AppComponent { } 

將引導CSS到index.html的：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

清除完全styles.css的

---

，現在我正在尋找一種方式來導入NG2-引導代碼。我該怎麼做？

Answer 1

好吧，這裏是一個工作示例：http://embed.plnkr.co/k9s1LnJU5cVy18yid7Va/

你必須：

配置SystemJS加載NG2，自舉和力矩

//map tells the System loader where to look for things 
    var map = { 
     'app': 'app', 
     ..... 
     'ng2-bootstrap': 'https://npmcdn.com/ng2-bootstrap@1.0.24', 
     'moment': 'https://npmcdn.com/moment', 
    }; 

    //packages tells the System loader how to load when no filename and/or no extension 
    var packages = { 
    'app': { 
     main: 'main.ts', 
     defaultExtension: 'ts' 
    }, 
    ... 
    'ng2-bootstrap': { 
     main: 'ng2-bootstrap.js', 
     defaultExtension: 'js' 
    }, 
    'moment': { 
     main: 'moment.js', 
     defaultExtension: 'js' 
    } 
    }; 

導入NG2，引導指令

import {BUTTON_DIRECTIVES} f rom'ng2-bootstrap/ng2-bootstrap';

這裏是有一個工作切換按鈕您的組件：

import { Component } from '@angular/core'; 
import { AppBarComponent } from './app-bar.component'; 

import {CORE_DIRECTIVES} from '@angular/common'; 
import {FORM_DIRECTIVES} from '@angular/forms'; 
import {BUTTON_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap'; 

@Component({ 
    selector: 'my-app', 
    directives: [AppBarComponent, BUTTON_DIRECTIVES, CORE_DIRECTIVES, FORM_DIRECTIVES], 
    template: ` 
    <app-bar></app-bar> 
    <button type="button" class="btn btn-primary" 
     [(ngModel)]="singleModel" btnCheckbox 
     btnCheckboxTrue="1" btnCheckboxFalse="0"> 
     Single Toggle 
    </button> 
    singleModel: {{singleModel}} 
    ` 
}) 
export class AppComponent { }