如何在visual studio代码中为angular2使用ng2引导程序

Question

是否有一组步骤可以在使用VS代码的Angular2应用程序中使用Angular2引导程序。请分享同样的。应该心存感激。我已经使用以下命令安装了NG2引导模块：

npm install ng2-bootstrap --save

这一步之后该做些什么？我们需要moment.js才能使用NG2引导吗？

Answer 1

在运行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
  ],
....

另外，您也可以引用这个柱塞