angular - 如何在 Visual Studio 代码中为 Angular2 使用 ng2-bootstrap

Question

是否有任何步骤可以在使用 VS CODE IDE 的 Angular2 应用程序中使用 ng2 引导程序。请分享相同的。应该感恩。我已经使用以下命令安装了 ng2-bootstrap 模块：

npm install ng2-bootstrap --save

这一步之后要做什么？我们是否需要 moment.js 才能使用 ng2-bootstrap？

Answer 1

运行后npm install --save ng2-bootstrap，您需要按照以下步骤操作 -

在 Systemjs.config.js 中，像这样配置 ng2-bootstrap -

  // 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