ng2-bootsrap沒有導出成員'TAB_DIRECTIVES'

Question

我正在對angular2進行操作，我必須使用該選項卡。對於我已經嘗試使用插件http://valor-software.github.io/ng2-bootstrap/

我已經寫了demoComponent作爲

import { Component, View, Inject} from 'angular2/core'; 
    import { CORE_DIRECTIVES } from 'angular2/common'; 
    import { TAB_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap'; 

    // webpack html imports 
    let template = require('./tabs-demo.html'); 

    @Component({ 
     selector: 'tabs-demo', 
     template: template, 
     directives: [TAB_DIRECTIVES, CORE_DIRECTIVES] 
    }) 
    export class TabsDemo { 
     private tabs:Array<any> = [ 
     {title: 'Dynamic Title 1', content: 'Dynamic content 1'}, 
     {title: 'Dynamic Title 2', content: 'Dynamic content 2', disabled: true} 
     ]; 

     private alertMe() { 
     setTimeout(function() { 
      alert('You\'ve selected the alert tab!'); 
     }); 
     }; 
    } 

這裏是我的模板

<div (click)="$event.preventDefault()"> 
    <p>Select a tab by setting active binding to true:</p> 
    <p> 
    <button type="button" class="btn btn-primary btn-sm" (click)="tabs[0].active = true">Select second tab</button> 
    <button type="button" class="btn btn-primary btn-sm" (click)="tabs[1].active = true">Select third tab</button> 
    </p> 
    <p> 
    <button type="button" class="btn btn-primary btn-sm" (click)="tabs[1].disabled = ! tabs[1].disabled">Enable/Disable third tab</button> 
    </p> 
    <hr /> 
    <tabset> 
    <tab heading="Static title">Static content</tab> 
    <tab *ngFor="#tabz of tabs" 
     [heading]="tabz.title" 
     [active]="tabz.active" 
     (select)="tabz.active = true" 
     (deselect)="tabz.active = false" 
     [disabled]="tabz.disabled"> 

    </tab> 
    <tab (select)="alertMe()"> 
     <template tab-heading> 
     <i class="glyphicon glyphicon-bell"></i> Alert! 
     </template> 
     I've got an HTML heading, and a select callback. Pretty cool! 
    </tab> 
    </tabset> 

    <hr /> 

    <tabset [vertical]="true" type="pills"> 
    <tab heading="Vertical 1">Vertical content 1</tab> 
    <tab heading="Vertical 2">Vertical content 2</tab> 
    </tabset> 

    <hr /> 

    <p><i>Bootstrap 4 doesn't have justified classes</i></p> 
    <tabset [justified]="true"> 
    <tab heading="Justified">Justified content</tab> 
    <tab heading="SJ">Short Labeled Justified content</tab> 
    <tab heading="Long Justified">Long Labeled Justified content</tab> 
    </tabset> 
</div> 

但是當一飲而盡編譯它它給錯誤

please糾正我正確運行它。

Answer 1

看起來TAB_DIRECTIVES更名爲TAB_COMPONENTS。我嘗試了ng2-bootstrap版本0.53。

這是我在index.html有關文件SystemJS使用的配置：

<script> 
    System.config({ 
    packages: {   
     app: { 
     format: 'register', 
     defaultExtension: 'js' 
     }, 
     'ng2-bootstrap': { 
     format: 'register', 
     defaultExtension: 'js' 
     } 
    }, 
    map: { 
     'ng2-bootstrap': 'node_modules/ng2-bootstrap' 
    } 
    }); 
    System.import('app/boot') 
     .then(null, console.error.bind(console)); 
</script> 

希望它可以幫助你， 蒂埃裏