如何在visual studio代碼中使用ng2-bootstrap for angular2

是否有任何一組步驟可以在使用VS CODE IDE的Angular2應用程序中使用ng2引導。請分享一下。應該感激。我已經使用以下命令安裝了ng2-bootstrap模塊：如何在visual studio代碼中使用ng2-bootstrap for angular2

npm install ng2-bootstrap --save

此步驟後要做什麼？我們是否需要moment.js才能使用ng2-bootstrap？

來源

2016-10-14 Vishal Gulati

有一些相當不錯的說明[上ng2-bootstrap項目的GitHub頁面]（https://github.com/valor-software/ng2-bootstrap）。你的IDE與它沒有多大關係。 – Roy

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

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

// map tells the System loader where to look for things 
    var map = { 
    'moment': 'node_modules/moment/moment.js', 
    'ng2-bootstrap/ng2-bootstrap': 'node_modules/ng2-bootstrap/bundles/ng2-bootstrap.umd.js', 
    'app':      'app', // 'dist', 
    '@angular':     'node_modules/@angular', 
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api', 
    'rxjs':      'node_modules/rxjs' 
    };

index.html中添加這些

<script src="node_modules/ng2-bootstrap/bundles/ng2-bootstrap.min.js"></script> 
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">

在您的組件中，您可以像這樣使用 -

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

樣品實施：

import {Component} from '@angular/core'; 
import {AlertComponent } from 'ng2-bootstrap/ng2-bootstrap'; 
import {NgModel} from '@angular/forms'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <alert type="info">ng2-bootstrap hello world!</alert> 
     <pre>Selected date is: <em *ngIf="dt">{{ getDate() | date:'fullDate'}}</em></pre> 
     <h4>Inline</h4> 
     <div style="display:inline-block; min-height:290px;"> 
     <datepicker [(ngModel)]="dt" [minDate]="minDate" [showWeeks]="true"></datepicker> 
     </div> 
    `, 
}) 
export class AppComponent { 
    public dt:Date = new Date(); 
    private minDate:Date = null; 
    private events:Array<any>; 
    private tomorrow:Date; 
    private afterTomorrow:Date; 
    private formats:Array<string> = ['DD-MM-YYYY', 'YYYY/MM/DD', 'DD.MM.YYYY', 'shortDate']; 
    private format = this.formats[0]; 
    private dateOptions:any = { 
    formatYear: 'YY', 
    startingDay: 1 
    }; 
    private opened:boolean = false; 

    public getDate():number { 
    return this.dt && this.dt.getTime() || new Date().getTime(); 
    } 
}

而且在app.module.ts進口Ng2BootstrapModule喜歡這個 -

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

.... 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    Ng2BootstrapModule 
    ], 
....

此外，你可以參考這個plunker

來源

2016-10-14 07:24:13 Sanket

如何在visual studio代碼中使用ng2-bootstrap for angular2

回答

相關問題