如何在 visual studio 代码中为 angular2 使用 ng2-bootstrap

Question

是否有任何一组步骤可以使用 VS CODE IDE 在 Angular2 应用程序中使用 ng2 bootstrap。请分享相同的。应该感恩。我已经使用以下命令安装了 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

如何在 visual studio 代码中为 angular2 使用 ng2-bootstrap

how to use ng2-bootstrap for angular2 in visual studio code

typescript

visual-studio-code

ng2-bootstrap

angular