Angular2 ng2-bootstrap

Question

我在加入bootstrap到我的angular2項目時遇到了一些麻煩。

作爲上https://valor-software.com/ng2-bootstrap/記錄我已經npm install --save ng2-bootstrap安裝NG-引導到節點模塊目錄（moment被包含在相同的目錄中）。

添加

import {Component, ChangeDetectionStrategy} from '@angular/core'; 
import {CORE_DIRECTIVES} from '@angular/common'; 
import {TAB_DIRECTIVES} from '@ng2-bootstrap'; 

導致以下錯誤error TS2307: Cannot find module '@ng2-bootstrap'. 也發生了變化，從'../../../ng2-bootstrap'到'@ng2-bootstrap'的路徑。

兩者都沒有工作。任何想法如何解決它？

Answer 1

更新：這裏有一篇有趣的文章，介紹如何使用ng-cli在角項目中實現引導最新版本4 Alpha。 https://angularjs.de/artikel/angular2-bootstrap-scss-angular-cli

Answer 2

你跑npm install --save ng2-bootstrap後，您需要按照以下步驟 -

在Systemjs.config.js，配置NG2的自舉像這個 -

var map = { 
    'app':      'app', // 'dist', 
    '@angular':     'node_modules/@angular', 
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api', 
    'rxjs':      'node_modules/rxjs', 
    'ng2-bootstrap':    'node_modules/ng2-bootstrap' 
    }; 

    // packages tells the System loader how to load when no filename and/or no extension 
    var packages = { 
    'app':      { main: 'main.js', defaultExtension: 'js' }, 
    'rxjs':      { defaultExtension: 'js' }, 
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }, 
    'ng2-bootstrap': { main: 'ng2-bootstrap.js', defaultExtension:'js'} 
    }; 

index.html中添加這些

<script src="node_modules/ng2-bootstrap/bundles/ng2-bootstrap.min.js"></script> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 

在你的組件，你可以使用像這 -

import { TAB_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap'; 

樣品實施：

import { Component } from '@angular/core'; 
import {CORE_DIRECTIVES} from '@angular/common'; 
import {TAB_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap'; 

@Component({ 
    selector: 'my-app', 
    directives: [TAB_DIRECTIVES, CORE_DIRECTIVES], 
    template: `<h1>My First Angular 2 App with ng2-bootstrap</h1> 

    <tabset> 
    <tab heading="Static title">Static content</tab> 
    <tab *ngFor="let tabz of tabs" 
     [heading]="tabz.title" 
     [active]="tabz.active" 
     (select)="tabz.active = true" 
     (deselect)="tabz.active = false" 
     [disabled]="tabz.disabled" 
     [removable]="tabz.removable" 
     (removed)="removeTabHandler(tabz)"> 
     {{tabz?.content}} 
    </tab> 
    </tabset> 

    ` 
}) 
export class AppComponent { 
    public tabs:Array<any> = [ 
    {title: 'Dynamic Title 1', content: 'Dynamic content 1'}, 
    {title: 'Dynamic Title 2', content: 'Dynamic content 2', disabled: true}, 
    {title: 'Dynamic Title 3', content: 'Dynamic content 3', removable: true} 
    ]; 
} 

注：最新NG2的自舉版本與angular2 RC4版本兼容。

看看這是否有幫助。